css (层叠样式表) : 对html标签的渲染和布局
- 查找 (选择器)
- 操作标签 (属性操作)
导入用 link 标签,后面的href就用你的文件路径就好
写css文件,要单独写到一个文件里面去
推荐 : 链接式
1. 行内式 :
<p style='background-color: black'>hello doubi </p>
2. 嵌入式 : 嵌入式是将CSS样式几种写在网页的<head></head>标签对的<style></style>标签对中. 格式如下:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
3. 链接式 : 将一个.CSS文件引入到HTML文件中
<link href="mystyle.css" rel="stylesheet" type="text/css"/>二. css的选择器(Selector)
'选择器'指明了{}中的'样式'的作用对象,也就是'样式'作用于网页中的哪些元素.
一 .基本选择器
标签选择器 : p{}
id选择器 : #i1{}
class选择器 : .c1{} !!!常用
统配选择器 : *{}
二 .组合选择器
后代选择器
.c2 p{
color : red;
}
所有属于c2类后代的p标签都使用这个样式. 用 空格
子代选择器
.c2>p{
color : red;
}
所有属于c2类的子元素p标签适用. 只适用子元素,孙子元素不能用,兄弟元素也不行. 用>.
毗(pi)邻选择器 :
.c2+p{
color : red;
}
紧随.c2之后的所有同级p标签. 用+.
兄弟选择器 :
.c2~p
##标签嵌套 : 块级元素可以嵌套内联元素或者某些块级元素.但!!!内联元素不可以嵌套块级元素,它只能包含其他内联元素. 再注意 : p标签不可以包含块级元素.
三 .属性选择器 :
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;}
四 .选择器的优先级 :
继承是css的一个主要特征,依赖于祖先>后代的关系.
!!! 任何显示申明的规则都可以覆盖其继承样式。
!!! 有一些属性不能被继承，如：border, margin, padding, background等。
###CSS的优先级 :
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1 内联样式表的权值最高 style=""－－－1000；
2 统计选择符中的ID属性个数。 #id －－－100
3 统计选择符中的CLASS属性个数。 .class －－－10
4 统计选择符中的HTML标签名个数。 p －－－1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。