一.语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
selecter{
property:value;
...
}
二.引入方式
1.行内式
<p style="background-color: rebeccapurple">hello hantao</p>
2.嵌入式
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>
3.链接式
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4.导入式
<style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径 </style>
三.CSS选择器
基本选择器
标签选择器,id选择器,class选择器,通配选择器
组合选择器
E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
E > F 子元素选择器,匹配所有E元素的子元素F
E +
F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F
E ~ F 普通兄弟选择器(以破折号分隔
属性选择器
E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略。
比如“[cheacked]”。以下同。) p[title] { color:
#f00; }
E[att
=
val] 匹配所有att属性等于“val”的E元素 div[
class
=
”error”] { color:
#f00; }
E[att~
=
val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
td[
class
~
=
”name”] { color:
#f00; }
E[attr^
=
val] 匹配属性值以指定值开头的每个元素
div[
class
^
=
"test"
]{background:
#ffff00;}
E[attr$
=
val] 匹配属性值以指定值结尾的每个元素 div[
class
$
=
"test"
]{background:
#ffff00;}
E[attr
*
=
val] 匹配属性值中包含指定值的每个元素 div[
class
*
=
"test"
]{background:
#ffff00;}
伪类选择器
anchor伪类
:before伪类和:after:伪类
选择器的优先级
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:
1 内联样式表的权值最高 ------------1000;
2 统计选择符中的ID属性个数。 #id --------------100
3 统计选择符中的CLASS属性个数。 .class -------------10
4 统计选择符中的HTML标签名个数。 p ---------------1
按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。
四.css属性操作
文本操作
color
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定:
- 十六进制值 - 如: #FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
水平对齐方式
text-align 属性规定元素中的文本的水平对齐方式。
- left 把文本排列到左边。默认值:由浏览器决定。
- right 把文本排列到右边。
- center 把文本排列到中间。
- justify 实现两端对齐文本效果。
文本其他属性
font-size: 10px;
line-height: 200px; 文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
vertical-align:-4px 设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效
text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线
font-family: 'Lucida Bright'
font-weight: lighter/bold/border/
font-style: oblique
text-indent: 150px; 首行缩进150px
letter-spacing: 10px; 字母间距
word-spacing: 20px; 单词间距
text-transform: capitalize/uppercase/lowercase ; 文本转换,用于所有字句变成大写或小写字母,或每个单词的首字母大写
背景属性
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;\(repeat:平铺满)
background-position: right top(20px 20px);
简写:
background:#ffffff url('1.png') no-repeat right top;
边框属性
border-style: solid;
border-color: chartreuse;
border- 20px;
\简写
border: 30px red solid;
position属性
relative:相对定位。
相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意:position:relative的一个主要用法:方便绝对定位元素找到参照物。
定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。