CSS小记

  • A+
所属分类：Web前端
摘要

CSS（Cascading Style Sheet）层叠样式表；决定了如何显示HTML元素；由W3C创造行内式：即标签中用style标签设定css样式（不推荐）
便宜好用的国外VPS推荐

CSS小记

1.CSS简介

CSS（Cascading Style Sheet）层叠样式表；决定了如何显示HTML元素；由W3C创造

1. 特点

  1. 样式通常储存在样式表中
  2. 外部样式表通常存储在 css文件中
  3. 多个样式定义可层叠为一

2. 引入方式

  1. 行内式：即标签中用style标签设定css样式（不推荐）

  2. 内嵌式：在成对的head标签中嵌入style标签（对于多个网页，若修改样式麻烦）

  3. 导入式

    将一个独立的.css文件引入html文件中，导入式使用css规则引入外部css文件

    <head> 	<style type="text/css"> 		@import"mystyle.css"; 	</style> </head>

    缺点：导入式会在整个网页装载完后再装载css文件；这就造成了一个问题

    ​ 若网页比较大则会出现先显示无样式的页面，闪烁一下之后，再出现网页的样式

  4. 链接式

    此方式 也是将一个.css文件引入到html文件中，但它与导入式不同的是使用html规则引入外部css文件

    <head> 	<link rel="stylesheet" href="mystyle.css" type="text/css" /> </head>

    优势：在网页文件主体装载前装载完成，显示出的网页一开始就是带样式效果的

3. 层叠次序（优先级）

问：当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

答：一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高优先级

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于head标签内部）
  4. 内联样式（在html文档的元素标签内部）

2. CSS语法

1. 基础语法

  1. 简介

    css规则由两个主要的部分构成：选择器以及一条或者多条声明

    选择器通常是您需要改变样式的html元素

    每一条声明由一个属性和一个值组成

    CSS小记

  • 注意:

    1. 若值为若干单词，则要给值添加引号

      p {font-family:"sans serif"}

    2. css 对大小写不敏感；注意空格以便编辑

      body { 	color: #0000; 	margin: 0; 	padding: 0; }

2. 高级语法

1. 选择器分组

h1,h2,h3,h4,h5,h6{   /*用逗号隔开*/ 	color:green; }

2.继承

子元素从父元素继承属性

body {     font-family:Verdana,sans-serif; } /*body里面的所有子元素都使用 Verdana字体*/

若要摆脱继承，可以独立创建一个针对某标签的特殊规则

body {     font-family:Verdana,sans-serif; } p {    font-family:Times,"Times New Roman",serif;  }

3. 选择器分类

1. id 选择器
<html lang="zh_CN">     <head>         <meta charset="UTF-8">         <style type="text/css">             #red {color: red;}             #green {color: green;}         </style>     </head>     <body>         <p id="red">这个段落是红色</p>         <p id="green">这个段落是绿色</p>     </body> </html>
2. class 选择器
<html lang="zh_CN">     <head>         <meta charset="UTF-8">         <style type="text/css">             .center {                 text-align: center;             }         </style>     </head>     <body>         <h1 class="center">         	This heading will be center-aligned         </h1>                  <p class="center">         	This paragraph will also be center-aligned         </p>     </body> </html>

class选择器和派生选择器

.fancy td {     color: #f60;     background: #666 } /*在上述列子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字 	（名为fancy的更大元素可能是一个表格或div）*/

元素也可以基于它们的类而被选择

td.fancy{     color: #f60;     background: #666;  } <!--在上述列子中，类名为fancy的表格单元将是带有灰色背景的橙色文字 	仅仅作用于td元素下的.fancy类-->
3. 派生选择器

通过依据元素在其位置的上下文关系来定义样式，使标记更加简洁

<html lang="zh_CN">     <head>         <meta charset="UTF-8">         <style type="text/css">             li strong {                 font-style: italic;                 font-weight: normal;             }         </style>     </head>     <body>         <p>             <strong>             	我是粗体字             </strong>         </p>         <ol>             <li>                 <strong>                 	我是斜体字，这是因为我是在li列表中                 </strong>             </li>             <li>             	我是正常字体             </li>         </ol>     </body> </html>

id选择器和派生选择器

在现代布局种，id选择器常常用于建立派生选择器

<html lang="zh_CN">     <head>         <meta charset="UTF-8">         <style type="text/css">             #sidebar p {                 font-style: italic;                 text-align: right;                 marign-top: 0.5em;                 color:red;             }         </style>     </head>     <body>         <p id="sidebar">这个段落是红色</p>         <p id="green">这个段落是绿色</p>     </body> </html>
4. 属性选择器

对带有指定属性的html元素设置样式

[title] { 	color: red; }

属性和值选择器（单个值）

[title="W3School"] {     border: 5px solid blue; }

属性和值选择器（多个值）

<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <style type="text/css"> [title~=hello]       /*适用于由空格分隔的属性值*/ { color:red; }  </style> </head>  <body> <h1>可以应用样式：</h1> <h2 title="hello world">Hello world</h2> <p title="student hello">Hello W3School students!</h1> <hr />  <h1>无法应用样式：</h1> <h2 title="world">Hello world</h2> <p title="student">Hello W3School students!</p> </body> </html> 
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <style type="text/css"> [lang|=en]				/*适用于由连字符分隔的属性值*/ { color:red; } </style> </head>  <body> <h1>可以应用样式：</h1> <p lang="en">Hello!</p> <p lang="en-us">Hi!</p> <hr />  <h1>无法应用样式：</h1> <p lang="us">Hi!</p> <p lang="zh">Hao!</p> </body> </html>

常用场景：设置表单的样式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> input[type="text"] {   width:150px;   display:block;   margin-bottom:10px;   background-color:yellow;   font-family: Verdana, Arial; }  input[type="button"] {   width:120px;   margin-left:35px;   display:block;   font-family: Verdana, Arial; } </style> </head> <body>  <form name="input" action="" method="get"> <input type="text" name="Name" value="Bill" size="20"> <input type="text" name="Name" value="Gates" size="20"> <input type="button" value="Example Button">  </form> </body> </html>
5. 后代选择器

后代选择器亦包含选择器；可以选择作为某元素后代的元素

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> h1 em {color:red;}     /* 元素em为h1的后代；两元素的层次间隔是无限的 */ </style> </head>  <body> <h1>This is a <em>important</em> heading</h1> <p>This is a <em>important</em> paragraph.</p> </body> </html>
6. 子元素选择器

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，用此选择器

子结合符( > )

<!DOCTYPE html> <html> <head> <style type="text/css"> h1 > strong {color:red;}   /*这个规则会把第一个h1下面的两个strong元素内容变红色，其它则不受影响*/ </style> </head>  <body> <h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1> </body> </html>
7. 相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可用此选择器

相邻兄弟结合符（ + ）

注意：用一个结合符只能选择两个相邻兄弟中第二个元素

<!DOCTYPE html> <html> <head> <style type="text/css"> li + li {font-weight:bold;} /*上面这个选择器只会把列表中的第二个和第三个列表项变为粗体;第一个列表项不受影响*/ </style> </head>  <body> <div>   <ul>     <li>List item 1</li>     <li>List item 2</li>     <li>List item 3</li>   </ul>   <ol>     <li>List item 1</li>     <li>List item 2</li>     <li>List item 3</li>   </ol> </div> </body> </html>

结合其它结合符例子

html>body table + ul{     margin-top: 20px; } /*解释：选择紧接在table元素后的所有兄弟ul元素，该table元素包含在一个body元素中，body元素本身也是html元素的子元素*/

4. 伪类

css伪类 （ pseudo-classes）用于 向某些选择器添加特殊 的效果

  1. 语法

    selector/selector.class : pseudo-class{ 	property: value; }

  2. 锚伪类

    链接的不同状态分别以不同的方式显示（对大小写不敏感）

    a:link {color: #FF0000}			/*未访问的状态*/ a:visited {color: #00FF00}		/* 已访问的状态*/ a:hover {color: #FF00FF}		/*鼠标移动到链接上的状态*/ a:active {color:#0000FF}		/*选定的链接*/  /*注意顺序，必须按照上面的顺序，否则无效*/

  3. 伪类与css类配合使用

    a.red : visited{     color:#FF0000; } <a class="red" href="css_syntax.asp">CSS Syntax</a>  /*假如上面的列子中的链接被访问过，那么它将显示为红色*/

5. 伪元素

伪元素（pseudo-element）用于向某些选择器设置特殊效果

  1. 语法

    selector/selector.class : pseudo-element{ 	property: value; }

  2. after伪元素

    可以在元素的内容后面插入新内容

    <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <style type="text/css"> h1:before {     content:url(/i/w3school_logo_white.gif) } </style> </head>  <body> <h1>This is a heading</h1> <p>The :before pseudo-element inserts content before an element.</p> <h1>This is a heading</h1> <p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。 </body> </html>

    效果： CSS小记

  3. 反之before伪元素是插在元素内容前面

3. 常用CSS

后续跟进……

便宜好用的国外VPS推荐