前端学习: CSS

CSS基本语法及页面

CSS基本语法

选择器 {属性:值; 属性:值; 属性:值;}

div{ width:100px; height:100px; color:red }

css页面引入方法

1. 外联式: 用<link>标签,链接到外部样式表

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

2. 嵌入式: 在<style>标签中写入样式表

   <style type="text/css">
   	div{ width:100px; height:100px; color:red }
   </style>
   

3. 内联式: 直接在标签的style属性中写样式

   <div style="width:100px; height:100px; color:red ">content</div>
   

CSS常用属性

文本样式

css属性	作用
color	设置文字的颜色(没有font-color属性)
font-size	设置文字的大小
font-family	设置文字的字体,尽量避免中文 `font-family:‘MicrosoftYahei’
font-style	设置字体是否倾斜. normal表示不倾斜,italic表示倾斜
font-weight	设置文字是否加粗. normal表示不加粗,bold表示加粗
font	同时设置文字的多个属性,注意顺序font：font_weight font-size/line-height font-family 如font:normal 12px/36px '微软雅黑';
line-height	设置文字的行高
text-decoration	设置文字的下划线. none表示无下划线
text-indent	设置文字首行缩进
text-align	设置文字水平对齐方式left|center|right

表格样式

css属性	作用
border-collapse	设置边框合并.collapse表示合并边框,用以制作一像素宽的边线的表格

颜色表示法

CSS支持三种颜色值表示方法：

1. 颜色名表示,如:red红色,gold金色
2. rgb表示,如:rgb(255,0,0)红色
3. 16进制数值表示,如:#ff0000红色,可简写成#f00

CSS选择器

基础选择器

1. 标签选择器: 通过标签类型选中元素. 影响范围大,建议尽量应用在层级选择器中.
   其中*代表所有标签,是大杀器,常用于更改标签基本属性

   // 消除所有间距
   *{margin:0;padding:0}	
   

2. id选择器: 通过标签id属性选择元素. 一个页面中,每个id对应的元素是唯一的,id名称不能重复

   语法: #id名

   <style type="text/css">
   	#box{color:red} 
   </style>
   
   <div id="box">对应以上一条样式，其它元素不允许应用此样式</div>
   

3. 类选择器: 通过class属性选择元素. 一个类可应用于多个元素,一个元素上也可以使用多个类

   语法: .类名

   <style type="text/css">
   	.red{color:red}
   	.big{font-size:20px}
   	.mt10{margin-top:10px} 
   </style>
   
   <div class="red">....</div>
   <h1 class="red big mt10">同时受到三个样式表约束</h1>
   <p class="red mt10">....</p>
   

4. 层级选择器: 用于选择后代(子, 孙, …)元素,可与标签元素结合使用.

   语法: 用空格分隔上下级元素

   <style type="text/css">
   	.box span{color:green}
   	.box .red{color:pink}
   	.red{color:red}
   </style>
   
   <div class="box">
   	<span>.box span to green</span>
   	<a href="#" class="red">.box .red to pink</a>
   </div>
   <h3 class="red"> .red to red</h3>
   

5. 组选择器: 选中多个样式相同的元素
   语法: 用逗号分隔同级元素

   <style type="text/css">
   	.box1,.box2,.box3{width:100px;height:100px}
   	.box1{background:red}
   	.box2{background:pink}
   	.box2{background:gold}
   </style>
   
   <div class="box1">....</div>
   <div class="box2">....</div>
   <div class="box3">....</div>
   

6. 伪类及伪元素选择器

   语法: 选择器:伪类或伪元素
   常用伪元素和伪类如下:

   伪元素 或 伪类	作用
   hover	表示鼠标悬浮在元素上时的状态
   before|after	可通过样式在元素前后插入内容

   <style type="text/css">
   	.box1:hover{color:red}
   	.box2:before{content:'行首文字'}
   	.box3:after{content:'行尾文字'}
   </style>
   
   <div class="box1">....</div>
   <div class="box2">....</div>
   <div class="box3">....</div>
   

CSS3新增选择器

下面的E和F既可以是标签,也可以是类名

按类或标签选择

1. 不区分类型,计算所有元素个数

   选择器	作用
   E:nth-child(n)	匹配元素类型为E且是父元素的第n个子元素
   E:nth-last-child(n)	匹配元素类型为E且是父元素的倒数第n个子元素(与上一项顺序相反)
   E:first-child	匹配元素类型为E且是父元素的第一个子元素
   E:last-child	匹配元素类型为E且是父元素的最后一个子元素
   E:only-child	匹配元素类型为E且是父元素中唯一的子元素

   上述括号内的中n可以是由 以n为变量的代数式 代替, 如nth-child(2n+1)表示 选中所有奇数项

2. 只计算对应类型的个数

   选择器	作用
   E:nth-of-type(n)	匹配父元素的第n个类型为E的子元素
   E:nth-last-of-type(n)	匹配父元素的倒数第n个类型为E的子元素(与上一项顺序相反)
   E:first-of-type	匹配父元素的第一个类型为E的子元素
   E:last-of-type	匹配父元素的最后一个类型为E的子元素
   E:only-of-type	匹配父元素中唯一子元素为E的子元素

3. 根据元素状态选中元素

   选择器	作用
   E:empty	选择一个空的元素
   E:enabled	可用的表单控件
   E:disabled	失效的表单控件
   E:checked	选中的checkbox
   E:target	选中的锚点

4. 根据层级关系选中元素

   选择器	作用
   E:not(s)	不包含某元素
   E > F	E元素的子F元素(孙F元素不被选中)
   E ~ F	E元素后面所有兄弟F元素
   E + F	E元素后面紧挨着的兄弟F元素

按属性选择

选择器	作用
E[data-attr]	含有data-attr属性的元素
E[data-attr='ok']	含有data-attr属性的元素且它的值为'ok'
E[data-attr^='ok']	含有data-attr属性的元素且它的值的开头含有'ok'
E[data-attr$='ok']	含有data-attr属性的元素且它的值的结尾含有'ok'
E[data-attr*='ok']	含有data-attr属性的元素且它的值中含有'ok'

CSS权重

选择器	例子	权重
!important,加在样式属性值后		10000
内联样式	style=""	1000
ID选择器	#content	100
类,伪类和属性选择器	content.``:hover	10
标签选择器和伪元素选择器	div.``p.``:before	1
通用选择器(*),子选择器(>),相邻选择器(+),同胞选择器(~)		0