CSS选择器和样式

CSS

CSS：
- 选择器：
- - 通配符选择器：
  - 基本选择器：
  - - 标签选择器：
    - 类选择器：
    - ID选择器：
    - 基本选择器的优先级别:
  - 群组选择器:
  - 派生选择器：
  - - 后代选择器：
    - 子代选择器：
    - 相邻兄弟选择器：
  - 属性选择器：
  - 锚伪类:
- 样式：
- - 样式优先级：
  - 常用样式：

CSS：

CSS：层叠样式表 (Cascading Style Sheets)，样式定义如何显示HTML 元素，是为了解决内容与表现分离的问题，多个样式定义可层叠为一，样式通常存储在样式表中。

选择器：

选择器：选择你所需要修饰的HTML元素。

通配符选择器：

通配符选择器：*

*{

}

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{color: red;}</style></head><body><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><p>今天天气正好</p><p>风过林梢</p><span>我们正当年少</span><span>追寻幸福时光</span></body>
</html>

基本选择器：

标签选择器：

直接写标签。

标签{

}

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">p{color: red;}</style></head><body><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><p>今天天气正好</p><p>风过林梢</p><span>我们正当年少</span><span>追寻幸福时光</span></body>
</html>

类选择器：

.类名{

}

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.myclass{color: red;}</style></head><body><h1 class="myclass">一级标签</h1><h2>二级标签</h2><h3 class="myclass">三级标签</h3><h4>四级标签</h4><h5 class="myclass">五级标签</h5><h6>六级标签</h6><p>今天天气正好</p><p>风过林梢</p><span>我们正当年少</span><span>追寻幸福时光</span></body>
</html>

ID选择器：

#ID名{

}

id唯一，不能重复！

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#myid{color: red;}</style></head><body><h1 id=myid>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><p>今天天气正好</p><p>风过林梢</p><span>我们正当年少</span><span>追寻幸福时光</span></body>
</html>

基本选择器的优先级别:

ID选择器 > 类选择器 > 标签选择器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">p{color: red;}.myclass{color: green;}#myid{color: blue;}</style></head><body><p id="myid" class="myclass">今天阳光正好</p><p class="myclass">微风吹过林梢</p></body>
</html>

群组选择器:

标签之间用英文逗号隔开。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">h1,p,span{color: red;}</style></head><body><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><p>今天天气正好</p><p>风过林梢</p><span>我们正当年少</span><span>追寻幸福时光</span></body>
</html>

派生选择器：

派生选择器又称：上下文关系选择器。

通过依据元素在其位置的上下文关系来定义样式。

后代选择器：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">ul a{color: red;}</style></head><body><ul><li><a href="#">超链接1</a></li><li><a href="#">超链接2</a></li><li><a href="#">超链接3</a></li></ul><ul><li><a href="#">超链接4</a></li><li><a href="#">超链接5</a></li><li><a href="#">超链接6</a></li><li><a href="#">超链接7</a></li></ul><a href="#">超链接8</a><a href="#">超链接9</a><a href="#">超链接10</a></body>
</html>

子代选择器：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">li>a{color: red;}</style></head><body><ul><li><a href="#">超链接1</a></li><li><a href="#">超链接2</a></li><li><a href="#">超链接3</a></li></ul><ul><li><a href="#">超链接4</a></li><li><a href="#">超链接5</a></li><li><a href="#">超链接6</a></li><li><a href="#">超链接7</a></li></ul><a href="#">超链接8</a><a href="#">超链接9</a><a href="#">超链接10</a></body>
</html>

相邻兄弟选择器：

注意：效果作用在后者。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*a和a挨在一起的，作用于后者的a*/a+a{color: red;}</style></head><body><ul><li><a href="#">超链接1</a></li><li><a href="#">超链接2</a></li><li><a href="#">超链接3</a></li></ul><ul><li><a href="#">超链接4</a></li><li><a href="#">超链接5</a></li><li><a href="#">超链接6</a></li><li><a href="#">超链接7</a></li></ul><a href="#">超链接8</a><a href="#">超链接9</a><a href="#">超链接10</a></body>
</html>

属性选择器：

单个属性：
input[placeholder]{color: red;}

单个属性+值：
input[placeholder=“请输入账号…”]{color: red;}

多个属性：
input[name][placeholder]{color: red;}

多个属性+值：
input[name=“name”][type=“text”]{color: red;}

锚伪类:

监听超链接的各种状态（未访问、已访问、鼠标悬停、鼠标按下）。

a:link {color: #FFCCFF} ------>未访问的链接
a:visited {color: #66FF66} ------> 已访问的链接
a:hover {color: #33FFFF} ------>鼠标移动到链接上
a:active {color: #000033} ------> 选定的链接

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">a:link {color: #FFCCFF}		/* 未访问的链接 */a:visited {color: #66FF66}	/* 已访问的链接 */a:hover {color: #33FFFF}	/* 鼠标移动到链接上 */a:active {color: #000033}	/* 选定的链接 */</style></head><body><a href="http://www.jd.com">京东</a></body>
</html>

样式：

分类：

内部样式表

外部样式表

行内样式表

样式优先级：

行内样式 > 内部样式或外部样式（内外部样式表要看加载顺序）。

为什么行内样式最优先呢？
因为行内样式最后加载。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--外部样式表--><link rel="stylesheet" type="text/css" href="../../css/new_file.css"/><!--内部样式表--><style type="text/css">p{color: red;}</style></head><body><!--行内样式--><p style="color: blue;">今天天气真好</p></body>
</html>

常用样式：

1.字体属性

font-family(字体)

font-size（大小）

font-style（风格）

---- normal标准样式

   ---- italic斜体

---- oblique倾斜

---- inherit从父类继承的字体样式

font-weight(字体加粗)

   ----normal标准样式

   ----bold粗体

   ----bolder更粗

----lighter更细

2.文本属性

letter-spacing(字母间隔)

text-decoration（划线修饰）

text-align（文本对齐方式）

text-indent(文本缩进)

line-height（行高）

3.背景

background-color

background-image

background-repeat

4.边框

border-bottom

solid(实线)

dashed(虚线)

double(双实线)

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">p{/*设置字体样式-------------------------------------------*/font-family: "微软雅黑";/*设置字体*/font-size: 50px;/*设置字体大小*/font-style: italic;/*设置字体样式 - 倾斜*/font-weight: bold;/*设置字体粗细*//*设置文本样式-------------------------------------------*/letter-spacing: 20px;/*设置文本间隔*/text-decoration: underline;/*设置文本划线 - 下划线*/text-align: center;/*设置文本对齐方式 -- 居中*/color: white;/*设置文本颜色*//*设置背景样式 --------------------------------------------*/background-color: red;/*设置背景颜色*/}a{text-decoration: none;/*设置字体划线 - 去除划线*/}div{width: 500px;height: 500px;background-image: url(../img/花.jpg);/*设置背景图片*/background-repeat: repeat-y;/*设置平铺方式*/border: orange 1px solid;/*设置边框 - 颜色,粗细,实线*/}</style></head><body><p>今天天气真好</p><a href="#">百度一下</a><br /><div></div></body>
</html>