CSS的引入方式
第一种:在head中 <style></style> 嵌入式
第二种:在head中 <link href="index.css" rel="stylesheet"> 链接式 (先加载css,再加载html)推荐
第三种:在head中 <style>@import "index.css";</style>> 导入式(先加载html,再加载css)
第四种:直接在html标签中<div style="width: 50%; height: 60px; background-color: orangered">不推荐这种方式</div> 行内式
CSS的选择器
1、基础选择器
* 通用元素选择器,匹配任何元素 * { margin:0; padding:0; }
E 标签选择器,匹配所有使用E标签的元素 p { color:green; }
.info和E.info class选择器,匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:red }
#info和E#info id选择器,匹配所有id属性等于footer的元素 #info { background:#333 } P#info { background:blue }
2、组合选择器(这里的E,F可以是基础选择器中的选择器)
E,F 多元素选择器,同时匹配所有E元素与F元素,E和F之间用逗号分隔 div,p { color:#f00 }
E F 后代选择器,匹配所有属于E元素后代(儿子、孙子....)的F元素,E和F之间用空格分隔 li a { font-weight:bold; }
E>F 子元素选择器,匹配所有E元素的子元素(仅儿子)F,E和F之间用>分隔 div > p { color:#ccc }
E+F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F,E和F之间用加号分隔 div + p { color:000 }
3、属性选择器
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;}
4、伪类
anchor伪类:专用于控制链接的显示效果
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
before after伪类
p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}
p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello";color:red}
转载于:https://www.cnblogs.com/dangrui0725/p/9503361.html