一、CSS的引入方式
1、行内式
<p style="color:red">红色</p>
2、嵌入式
将CSS样式表集中写在head标签的style标签中
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS</title> ?<style> ???p{ ?????color: red; ???} ?</style></head><body><p>红色</p></body></html>3、链接式
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS</title> ?<link rel="stylesheet" href="css.css"></head><body><p>红色</p></body></html>
css.css为css文件的文件路径
4、导入式
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS</title> ?<style type="text/css"> ???@import url(‘css.css‘); ?</style></head><body><p>红色</p></body></html>
导入式将在所有内容加载完毕后在加载css样式表
二、选择器
1、基础选择器
a、通用元素选择器
语法：*{}
作用所有元素
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS</title> ?<style> ???*{ ?????color: red; ???} ?</style></head><body><p>红色</p><p>蓝色</p></body></html>b、标签选择器
语法：标签{}
作用于匹配的标签
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS</title> ?<style> ???p{ ?????color: red; ?????background-color: #b3d4fc; ???} ?</style></head><body><p>红色</p><p>蓝色</p></body></html>c、id选择器
语法：#id{}
作用于匹配id
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS</title> ?<style> ???#red{ ?????color: red; ?????background-color: #b3d4fc; ???} ?</style></head><body><p id="red">红色</p></body></html>d、类选择器
语法：.类名{}
作用于匹配的类
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS</title> ?<style> ???.red{ ?????color: red; ?????background-color: #b3d4fc; ???} ?</style></head><body><p class="red">红色</p></body></html>2、组合选择器
a、多元素选择器
语法：标签A,标签B{}
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS</title> ?<style> ???div,p{ ?????background-color: aqua; ???} ?</style></head><body><div>www</div><p>www</p></body></html>b、后代元素选择器
后代与子代的区别：后代包括孙子辈，子代只是父子
语法：标签A 标签B 中间用空格，标签A与标签B指的是，在没有后代等复杂关系时能匹配到他们的方法，可以是上面提到的选择器之一
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS</title> ?<style> ???div .low{ ?????color: aqua; ???} ?</style></head><body><div> ?<div> ???<div> ?????<p class="low">www</p> ???</div> ?</div></div></body></html>c、子代元素选择器
语法：标签A>标签B
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS</title> ?<style> ???.top>p{ ?????color: red; ???} ?</style></head><body><div> ?<div> ???<div class="top"> ?????<p class="low">www</p> ?????<p>www</p> ???</div> ?</div></div></body></html>d、毗邻元素选择器
语法：标签A+标签B
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS</title> ?<style> ???.low+p{ ?????color: red; ???} ?</style></head><body><div> ?<div> ???<div class="top"> ?????<p>www</p> ?????<p class="low">www</p> ?????<p>www</p> ???</div> ?</div></div></body></html>3、属性选择器
标签可以省略
a、语法：标签[属性attr]{} ，功能：匹配所有属性为attr的元素
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS</title> ?<style> ???[attr]{ ?????color: red; ???} ?</style></head><body><div> ?<div> ???<div class="top"> ?????<p attr="bbu">www</p> ?????<p attr="low">www</p> ?????<p attr="qqq">www</p> ???</div> ?</div></div></body></html>结果：www全为红色
b、语法：标签[属性attr=‘‘value‘‘]{}，功能：匹配所有属性值为value的元素
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS</title> ?<style> ???[attr=‘low‘]{ ?????color: red; ???} ?</style></head><body><div> ?<div> ???<div class="top"> ?????<p attr="bbu">www</p> ?????<p attr="low">www</p> ?????<p attr="qqq">www</p> ???</div> ?</div></div></body></html>结果：中间www变红
c、标签[属性attr~=‘‘value1‘‘]{}，功能：匹配attr具有多个用空格分开的值，其中一个值为value1的元素
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS</title> ?<style> ???[attr~=‘eee‘]{ ?????color: red; ???} ?</style></head><body><div> ?<div> ???<div class="top"> ?????<p attr="bbu">www</p> ?????<p attr="low">www</p> ?????<p attr="qqq eee">www</p> 变红 ???</div> ?</div></div></body></html>d、 标签[属性attr^=‘‘value‘‘]{}，匹配属性值以value开头的元素
标签[属性attr$=‘‘value‘‘]{}，匹配属性值以value结尾的元素
标签[属性attr*=‘‘value‘‘]{}，匹配属性值包含value的元素
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS</title> ?<style> ???[attr^=‘bb‘],[attr$=‘w‘],[attr*=‘w‘]{ ?????color: red; ???} ?</style></head><body><div> ?<div> ???<div class="top"> ?????<p attr="bbu">www</p> 变红 ?????<p attr="low">www</p> 变红 ?????<p attr="qwe">www</p> 变红 ???</div> ?</div></div></body></html>4、伪类
给选择器添加一些特殊的效果
a、anchor伪类
控制链接的显示效果
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS</title> ?<style type="text/css"> ???a:link{ ?????color: blueviolet; ????} ???未访问的链接 ???a:hover{ ?????color: red; ???} ??鼠标悬浮在链接上时显示效果 ???a:visited{ ?????color: #888888; ???} 访问过后的效果 ???a:active{ ?????color: cadetblue; ???} ?鼠标选中时的效果 ?</style></head><body><a href="伪类.html" target="_blank">百度一下</a></div></body></html>b、befor，after伪类
在元素前后加上一些元素，加上的元素时通过css渲染得到的，在浏览器中不能被选中
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ?<style> ???div:after{ ?????content: ‘World‘; ???} ???div:before{ ?????content: ‘Zz‘; ???} ?</style></head><body><div>Hello</div></body></html>css基础
原文地址：https://www.cnblogs.com/sumcet/p/9026314.html