CSS样式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/HelloWord176/article/details/80052971

1. 什么是css?

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言；通俗来讲：就是用于美化HTML标签，相当于对页面进行化妆。

2. 标签选择器

标签选择器,根据指定的标签名称,找到当前界面所有的该名称的标签,然后设置属性

标签 { 属性：值；}

特点：标签选择器定义之后会经页面所有的元素都执行这个标签样式；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="keyword" content="标签选择器">
    <meta name="description" content="标签选择器">
    <link rel="stylesheet" type="text/css" href="#">
    <title>标签选择器</title>
    <style>
        h1 {
            color: red;     
        }
    </style>
</head>
<body>
    <h1>标签选择器</h1>
</body>
</html>

3. 类选择器 class 点击打开链接

语法格式： .自定义的类名 {属性：属性值 ;} 类选择符号用" . "表示

特点：谁调用，谁生效；

一个标签可以调用多个类选择器；（一个标签可以定义多个类名）

多个标签可调用同一个类选择器；（如果类名相同的情况下，其他标签可以同时使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-css类选择器.html</title>
    <!--
        类选择器,根据指定class找到对应的标签,然后设置属性
        1,格式:
        .类名{
                属性:值;
            }
        2,注意点 命名规范:
        (1),class命名,不能以数字开头
        (2),class命名格式包括字母、数字、下划线
        (3),不能是标签的名称
        (4),在编写id选择器时,一定要在class前面加上.
        (5),在同一界面中class命名可以重复
        (6),class是专门给某个特定的标签设置样式的
        (7),在html中每个标签可以同时绑定多个class,但是id是唯一的
        格式:<标签名称 class="类名1 类名2 ...> </标签名称>"
    -->
    <style>
        .p1{
            color: red;
        }
        .p2{
            color: burlywood;
        }
        .p3{
            color: greenyellow;
        }
        .p4{
            color: cyan;
        }
        .para1{
            color: green;
        }
        .para2{
            font-size:50px;
        }
    </style>
</head>
<body>
<h1>成功法则</h1>
<p class="p1">迟到毁一生</p>
<p class="p2">早退穷三代</p>
<p class="p3">按时上下班</p>
<p class="p4">终成高富帅</p>
<br>
<p class="para1 para2">我是段落</p> /*一个标签可以调用多个类选择器（一般最多调用2个）*/
</body>
</html>

4. ID选择器 id

id 选择器是根据标签中的id属性值进行选取来设置样式，用“ # ”表示。

语法格式： #自定义名称 { 属性：属性值;}

特点：一个ID选择器在一个页面只能出现一次。如果使用两次或两次以上，不符合w3c规范，JS调用会出问题。

一个标签只能调用一个ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID类选择器.html</title>
    <!--
        id选择器,根据指定id找到对应的标签,然后设置属性
        1,格式:
        #id的属性名 {
            属性名称:属性值;
        }
        2,ID选择器命名规范:
        (1),id命名,不能以数字开头
        (2),id命名格式包括字母、数字、下划线
        (3),不能是标签的名称
        (4),在编写id选择器时,一定要在id前面加上#
        (5),在同一界面中id命名不能重复
        (6),仅仅是为了设置样式,一般不会用id,因为id是留给js开发用的
    -->

    <style>
        #id1{
            color: red;
        }
        #id2{
            color: lightcoral;
        }
        #id3{
            color: greenyellow;
        }
        #id4{
            color: purple;
        }
    </style>
</head>
<body>
    <h1>成功法则</h1>
    <p id="id1">迟到毁一生</p>
    <p id="id2">早退穷三代</p>
    <p id="id3">按时上下班</p>
    <p id="id4">终成高富帅</p>
</body>
</html>

5. 通配符选择器 *(不推荐使用)

语法格式： * {属性：属性值；}

特点：给当前页面所有的标签设置相同的样式；（不推荐使用会增加浏览器的解析和服务器的负担）

<DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>通配符选择器*</title>
    <style type="text/css">
        * {
            color: red;
            font-size: 300px;
            background-color: yellow;
        }
    </style> 
</head>
<body>
    <h1>好好学习，天天向上</h1>
    <p>好好学习，天天向上</p>
    <div>我要成功</div>
    <span>你一定可以的</span> 
</body>
</html>

6. 交集选择器友情链接

语法格式：标签+类class / ID选择器 { 属性：属性值；}

既满足于使用了某个标签，又满足了使用类class或id选择器称之为 “交集选择器”。

第1个必须是标记选择器，第2个必须是class选择器或ID选择器（既、又关系）；

两个选择器之间不能有空格，必须连续书写

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>交集选择器</title>
	<style type="text/css">
		.content {
			font-size: 50px;
		}
		div.content {  /*交集选择器*/
			/*问题：如果我想把div标签中的字体颜色改为红色，但p标签中的字体颜色不变该怎么写？*/
			color: red;
		}
	</style>
</head>
<body>
	<div class="content">越努力，越幸运！</div>
	<p class="content">爱笑的人运气都不会太差！</p>
</body>
</html>

7. 后代选择器 ★★友情链接友情链接

语法格式：元素1+空格+元素2 { 属性：属性值；} （中间用空格相连）

后代选择器基本要求要满足是包含（嵌套）关系；

特点：后代选择器无限制隔代；

后代选择器不需要相匹配元素之间要有严格的父子关系.父在前子在后

元素之间自由组合；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后代选择器</title>
	<style>
		.tab li span{
			color: red;
		}
		/*.tab span {  这样写也是可以的，相匹配元素之间不需要有严格的父子关系
			color: red;
		}*/
		h2 {
			color: yellow;
			background-color: green;
			font-size: 30px;
		}
	</style>
</head>
<body>
	<h1 style="color: red; font-size: 35px;">知识点：</h1>
	<h2>所谓“后代选择器”：又称“包含选择器”，顾名思义就是选择某元素或某元素组后面的后代</h2>
	<strong>范例：</strong>
	<div class="tab">
		<ul>
			<li>青春就是这样，好得像是无怎样度过都会被浪费。</li>
			<li> 世界上唯一不变的就是变化，世界上唯一可能的就是不可能。</li>
			<li>你总是说青春从不曾永远，而那时候的我们，就是最好的我们。</li>
			<li><span> 最容易令人感到温暖和惊喜的是陌生人，因为你对他没有期望。</span></li>
			<li>最容易令人感到心寒和悲哀的是亲人，因为你爱他们。</li>
		</ul>
	</div>
</body>
</html>

8. 子元素选择器

语法格式：元素 > 元素 {属性：属性值；} 中间用符号“ > ”

特点：与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素；

选中直接下一代元素

9. 并集选择器

语法格式：选择器1，选择器2，....{ 属性：属性值；} 选择器之间用“ ， ”隔开

并集选择器是各个选择器通过逗号连接而成的任何形式的选择器（包括标记选择器、class类选择器、id选择器等），都可以作为并集选择器的一部分；如果某些选择器定义的样式完全相同或部分相同就可以利用并集选择器为他们定义相同的css样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16-css并集选择器.html</title>
    <!--
        并集选择器
        1,格式:
        选择器1,选择器2,...{
                属性:值;
           }
        2,注意点:
        (1),选择器之间利用,连接
        (2),选择器可以是标签名称,也可以是id、class名称
    -->
    <style>
        .ht,.para{
            color: red;
        }
    </style>
</head>
<body>

<h1 class="ht">我是头</h1>
<p class="para">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>

9. 字体类型 font-family

10. 文本属性 font

字体样式风格：font-style : normal正常 / oblique倾斜 / italic斜体；

字体粗细：font-weight：700(粗) 400(正常细)；可以用数字100-900(整倍数)定义字体粗细

字体大小：font-size： 50px ;

字体类型：font-family："微软雅黑"

font属性合写： font : normal 700 35px "微软雅黑"； （中间用空格隔开，如果字体样式风格是正常的话可忽略不写）

11. 样式表写法

1. 内嵌式写法：直接写在head标签中；

特点：样式只实现于当前页面，没有真正实现结构表现分离；

1  <head>
2      <style type=”text/css”>
3            样式表写法
4      </style>
5  </head>

2. 外链式写法：也是写在head标签中；

样式： <link rel="stylesheet" href="文件路径"> 重点

特点：谁调用谁生效，范围广，真正实现结构表现分离；

3. 行内样式写法：直接写在标签中；

<p style="color:red; font-size:35px;">我一定会成功</p>

特点：作用仅限于当前标签，范围小，结构表现混在一起（不推荐使用）；

12. 块元素

典型代表：div、p、h1-h6、ul、li ......

特点： ① 独占一行； ② 可以设置宽高；

③ 在嵌套（包含）关系下，子块元素宽度在没有定义的情况下和父块元素宽度默认保持一致；

13. 行内元素

典型代表： span、a、strong、em、del ......

特点： ① 在一行上显示（不独占行）；

② 不能直接摄者宽高（元素的宽高就是内容撑开的宽高，由其内容决定）；

14 . 行内块元素（内联元素）友情链接

典型代表： img、 input

特点： ① 在一行上显示； ② 可以自定义宽高；

15. display

1. 如何将行内元素转换为块元素？

display : block;

2. 如何将块元素转换为行内元素？

display：inline;

3. 如何将块、行内元素转换为行内块元素？

display : inline-block;

16. css三大样式之层叠性

当多个样式作用于同一个（同一类）标签上时，总是执行后面的代码（后面代码层叠前面的代码、浏览器的解析顺序是从上而下）。

17. css三大样式之继承性 友情链接

继承性发生的前提是嵌套（包含）关系，即子元素可以继承父元素的属性；

文字的所有属性（颜色、字体、大小、风格、粗细、行高）都可以继承；

特殊情况： h 系列标签文字的大小不能继承；

a 标签字体颜色不能被继承；

18. css三大样式之优先级友情链接

优先级是指：不同类别样式之间的权重比较；

浏览器默认样式 < 标签选择器 < class类选择器 < id选择器 < 行内样式 < ！important

0 1 10 100 1000 1000以上

100个标签选择器也比不过 1 个class类选择器。

同一级别中后写的样式会覆盖掉先写的样式。

19. 优先级的特点 友情链接 zhw9

1. 继承的权重为 0 .

2. 权重会叠加 .

CSS 优先级法则：

A 选择器都有一个权值，权值越大越优先；

B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；

D 继承的CSS 样式不如后来指定的CSS 样式；

E 在同一组属性设置中标有“!important”规则的优先级最大；

20. 链接伪类

1. a:link {属性：值；} 设置链接a标签的默认样式，有的浏览器不兼容所以建议直接使用 a 标签；

2. a:visited {属性: 值；} 设置链接a标签访问之后的状态；（一般不用）

3. a:hover {属性：值；} 设置当鼠标经过或放到链接a标签上时的显示状态；（常用）

4. a:active {属性：值；} 设置当链接a标签被激活（鼠标点击和释放之间发生得事件）显示的状态；（常用）

严格遵循书写顺序： ①link ② visited ③ hover ④ active

--------------------------------------------------------------------------------------------------------------------

5. a:focus{属性：值；} 设置当元素获取焦点时为其设置特殊样式；

文本修饰线: text-decoration

text-decoration: none; 没有任何装饰，正常文本默认值；

text-decoration: underline; 下划线；

text-decoration: line-through; 删除线；

21. background 背景友情链接

**background详细属性（友情链接）详细**
属性	值	属性作用
background-color	颜色	完全填充背景的颜色
background-image	url ( 图片位置)	用作背景的图片
background-position	left（左）、right（右）、center（中间）、top(顶部)、bottom(底部)	确定背景图片的位置
background-repeat	repeat(平铺默认)、no-repeat(不平铺)、repeat-x(x轴方向平铺)、repeat-y(y轴方向平铺)	确定背景图片是否重复平铺
background-attachment	fixed （固定不滚动）、scroll （滚动）	确定背景图片是否随页面滚动

-------------------------------------------------------------------------------------------------------------------------------

★★ background 背景属性连写：（url 为必写项）

22. 行高 line-height

行高：基线与基线之间的距离称之为行高；

行高：文字高度+上下边距=基线与基线之间的距离；

☆☆☆ 当一行文字行高和父元素高度一致的情况下，实现垂直居中显示；

行高的单位：px、em、%、2(单纯数字)；

23. 盒模型

content : 内容；

border : 边框；

padding ：内边距：内容到边框之间的距离称之为内边距；

margin ：外边距：边框以外的称之为外边距；

24. 盒模型之 “边框 border” 友情链接友情链接

border : 即边框，有三个属性；

border-style ：边框的线型 solid 实线、dashed 虚线、dotted 点线；

border-width ：边框的粗细（宽度）；

border-color ：边框的颜色；

△ border可以分边定义样式：

如： border-top-style：solid；

border-top-width：3px;

border-top-color: red;

☆分边的属性连写为： border-top：solid 3px red；（合写没有顺序要求，但线型为必写项）

☆☆☆ 如果四个边框的属性值相同：

border：solid 3px red；

25.盒模型之内边距 padding

内容(content)距边框(border)之间的距离称之为“内边距”;

padding-top：上内边距； padding-right：右内边距；

padding-bottom：下内边距； padding-left：左内边距；

**padding连写**
连写样式	意义
padding：30px；	上右下左内边就有都为30px
padding：30px 20px；	上下内边距为30px，左右为20px
padding：30px 20px 15px；	上内边距为30px,右左内边距为20px,下内边距为15px
padding：30px 20px 15px 35px；	上内边距为20px,右内边距20px,下内边距为15px,左内边距为35px

影响盒子宽度的因素有：① 内边距影响盒子的宽度； ② 边框的宽度影响盒子的宽度；

盒子的宽度= 定义的宽度+左右内边距(padding)的宽度+左右边框(border)的宽度

继承的盒子水平方向一般不会撑大：

包含(嵌套)的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。

26.盒模型之外边距 margin

边框以外的都为外边距；

**margin连写**
连写样式	意义
margin：30px；	上右下左外边就有都为30px
margin：30px 20px；	上下外边距为30px，左右为20px
margin：30px 20px 15px；	上外边距为30px,右左外边距为20px,下外边距为15px
margin：30px 20px 15px 35px；	上外边距为20px,右外边距20px,下外边距为15px,左外边距为35px