详解CSS（一）

1.CSS是什么

2.基本语法规范

3.引入方式

3.1内部样式表

3.2行内样式表

3.3外部样式表

4.选择器

4.1基础选择器

4.1.1标签选择器

4.1.2类选择器

4.1.3id选择器

4.1.4通配符选择器

4.2复合选择器

4.2.1后代选择器

4.2.2子选择器

4.2.3并集选择器

4.2.4伪类选择器

5.字体属性

6.文本属性

6.1文本颜色

6.2文本对齐

6.3文本装饰

6.4文本缩进

6.5行高

1.CSS是什么

层叠样式表 (Cascading StyleSheets).

CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.

2.基本语法规范

选择器 + {一条/N条声明}

选择器决定针对谁修改 (找谁)

声明决定修改啥. (干啥)

声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值.

<style>p {/* 设置字体颜色 */color: red;/* 设置字体大小 */font-size: 30px;}
</style><p>hello</p>

注意:

CSS 要写到 style 标签中(后面还会介绍其他写法)

style 标签可以放到页面任意位置. 一般放到 head 标签内.

CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换) .

虽然 CSS 不区分大小写, 我们开发时统一使用小写字母

冒号后面带空格、选择器和 { 之间也有一个空格

3.引入方式

3.1内部样式表

内部样式表是指将 CSS 样式代码写在 HTML 文件内部的<style>标签中。它是把 CSS 代码集中写在 HTML 文件的头部，用<style>标签注明。内部样式表只对所在的网页有效。

<!DOCTYPE html>
<html>
<head><style>body { background-color: linen; }h1 { color: maroon; margin-left: 40px; }</style>
</head>
<body>
</body>
</html>

内部样式表的优点：

1. 集中管理：样式代码与 HTML 代码在同一个文件中，便于查找和维护。

2. 针对性强：只对当前页面有效，能精确控制该页面的样式。

内部样式表的缺点：

1. 复用性差：不能在多个页面间方便地复用样式，每个页面都需要单独编写样式代码。

2. 代码冗余：如果多个页面具有相似的样式需求，会导致大量重复的样式代码，增加文件体积。

3.2行内样式表

行内样式表是指将样式直接写在 HTML 元素的style属性中，用style属性声明样式，

其语法格式为：<标签名 style = "属性1:属性值1;属性2:属性值2;...">。

行内样式表的优点是书写方便，可针对个别元素进行样式设置；

缺点是没有实现样式和结构的完全分离，且样式代码会嵌入到 HTML 代码中，导致代码冗余，不利于维护和修改。

在实际开发中，行内样式表通常用于简单的样式调整或临时的样式设置。

这种写法优先级较高，会覆盖其他的样式

<style>div {color: red;}
</style>
<div style="color:green">这边会显示绿色！</div>

<!DOCTYPE html>
<html><body><p style="color: red; font-size: 16px;">这是一段使用行内样式的文字。</p>
</body></html>

在元素标签内直接添加 style="具体样式属性和值" 即可

3.3外部样式表

实际开发中最常用的方式.

外部样式表是将 CSS 样式代码单独写在一个扩展名为.css 的文件中。使用外部样式表时，需要在 HTML 文件的<head>部分通过<link>标签来引用该样式文件，

比如<link rel="stylesheet" type="text/css" href="styles.css">。

外部样式表的优点：

1. 实现了样式与结构的完全分离，使得 HTML 文件更加简洁，易于阅读和维护。

2. 可以在多个 HTML 文件中共享，提高了代码的复用性，减少重复代码。

3. 便于统一管理和修改样式，只需要修改外部样式文件，所有引用该样式文件的页面都会受到影响

此时外部样式表呈现红色

4.选择器

4.1基础选择器

4.1.1标签选择器

它通过元素的标签名来选中页面上所有该类型的元素。例如，“p”标签选择器会选中所有的<p>段落元素，“div”标签选择器会选中所有的<div>元素。

使用标签选择器可以快速地为一类具有相同标签的元素应用统一的样式。比如，可以通过标签选择器一次性地设置所有<p>元素的字体、颜色、行高等等样式属性。

这种选择器的优点是简单直接，能够高效地对大量同类元素进行样式控制；缺点是缺乏特异性，如果只想针对特定的某个或某些元素进行独特的样式设置，可能就不太方便，这时可能需要结合其他更具针对性的选择器来使用。

<style>
p {color: red;
}div {color: green;
}
</style><p>显示红色</p><div>显示绿色</div>

4.1.2类选择器

它通过给元素添加特定的类名来进行样式的设置。一个元素可以被添加多个类名。

使用类选择器的方式是在 CSS 中以“.”开头加上类名，然后在后面定义样式

在 HTML 中，要让某个元素应用这个类的样式，就给该元素添加对应的类名，

如<p class="myClass">一段文字</p>

类选择器的好处是可以灵活地对不同元素应用相同的样式，并且可以根据需要随时添加或移除元素的类名来改变样式，具有很强的可复用性和灵活性。

<style>.blue {color: blue; }</style>
<div class="blue">显示蓝色</div> 
<div>默认颜色</div>

注意：一个类可以用多个标签使用，一个标签也可以使用多个类，多个类名要用空格分开

<style>.blue {color: blue; }.weight {width: 200px;}
</style>
<div class="blue width">显示蓝色且width=200px</div> 
<div>默认颜色</div>

4.1.3id选择器

它通过元素的 id 属性来选中特定的元素。id 在一个页面中应该是唯一的。

在 CSS 中，id 选择器以“#”开头，后面接元素的 id 名称

在 HTML 中，为元素添加对应的 id，如<div id="myID">文字</div>，则该元素会应用相应的样式

<style>#col {color: red;}
</style>
<div id="col">显示红色</div>

id 选择器的针对性非常强，但由于 id 的唯一性要求，其使用场景相对会更特定一些

4.1.4通配符选择器

使用 * 的定义, 选取所有的标签.

比如在CSS中这样写：*{margin: 0;padding: 0;}，就可以快速地将页面上所有元素的 margin 和 padding 都设置为 0。

通配符选择器通常用于快速进行一些全局的基本样式设置，但由于它选中的范围太广，在实际使用中需要谨慎，以免对不需要的元素也产生不必要的影响。

*{color: red;
}

页面的所有内容都会被改成红色 .不需要被页面结构调用.

4.2复合选择器

4.2.1后代选择器

后代选择器用于选择某元素的后代元素。可以是儿子或者孙子

比如，“ul li”就是一个后代选择器，表示选择所有在<ul>元素内部的<li>元素。

代码示例：将ol中的li修改颜色，且不影响ul

<ul><li>aaa</li> <li>bbb</li> 
</ul><ol><li>aaa</li><li>bbb</li>
</ol>

ol li {color: red
}

代码示例: 可以是任意基础选择器的组合. (包括类选择器, id 选择器)

<ol class="one"><li>ddd</li><li>eee</li><li><a href="#">fff</a></li><li><a href="#">fff</a></li><li><a href="#">fff</a></li>
</ol>

.one li a {color: green;
}

4.2.2子选择器

子选择器用“>”表示。它用于选择直接作为某元素子元素的特定元素。和后代选择器类似, 但是只能选择子标签.

元素1>元素2 { 样式声明 }

使用大于号分割，只选亲儿子，不选孙子元素

<div class="two"><a href="#">链接1</a><p><a href="#">链接2</a></p> 
</div>

后代选择器的写法会将链接1和2都选中

.two a {color: red;
}

子选择器的写法, 只选链接1

.two>a {color: red;
}

4.2.3并集选择器

并集选择器使用逗号“,”来连接多个选择器。它可以同时对多个不同类型的元素应用相同的样式。用于选择多组标签. (集体声明)，任何基础选择器都可以使用并集选择器，并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)

代码示例：


<div>苹果</div>
<h3>香蕉</h3>
<ul><li>鸭梨</li><li>橙子</li>
</ul>

1. 把苹果和香蕉颜色改成红色

div, h3 {color: red;
}

2. 把鸭梨和橙子也都一起改成红色

div,
h3,
ul>li {color: red; 
}

4.2.4伪类选择器

伪类选择器用于为元素的特定状态或行为定义样式。

常见的伪类有：

a:link 选择未被访问过的链接

a:visited 选择已经被访问过的链接

a:hover 选择鼠标指针悬停上的链接

a:active 选择活动链接(鼠标按下了但是未弹起)

a:focus元素获得焦点时（如输入框获得输入焦点）的状态

代码示例：

<a href="#">小猫</a>

a:link {color: black;/* 去掉 a 标签的下划线 */text-decoration: none;
}a:visited {color: green;
}a:hover {color: red;
}a:active {color: blue;
}

如何让一个已经被访问过的链接恢复成未访问的状态?

清空浏览器历史记录即可. ctrl + shift + delete

注意事项

按照 LVHA 的顺序书写, 例如把 active 拿到前面去, 就会导致 active 失效. 记忆规则 "绿化"

浏览器的 a 标签都有默认样式, 一般实际开发都需要单独制定样式.

实际开发主要给链接做一个样式, 然后给 hover 做一个样式即可. link, visited, active 用的不多.

5.字体属性

在 CSS 中，可以使用以下属性来设置字体相关的特性：

1.font-family：指定字体族，如 Arial、Times New Roman 等。

字体名称可以用中文, 但是不建议、多个字体之间使用逗号分隔、如果字体名有空格, 使用引号包裹、建议使用常见字体, 否则兼容性不好.

2.font-size：设置字体大小，如 16px、1em 等。

可以给 body 标签使用 font-size、要注意单位 px 不要忘记、标题标签需要单独指定大小

3.font-weight：设置字体的粗细，如 bold（粗体）、normal（正常）等。

可以使用数字表示粗细、bold==700、数字越大表示越粗

4.font-style：设置字体样式，如 italic（斜体）、normal（正常）等。

5.line-height：设置行高。

它决定了文本行与行之间的垂直间隔距离、可以使用具体的数值、相对单位来设定

p {font-family: Arial;font-size: 14px;font-weight: normal;font-style: normal;line-height: 1.5;
}

6.文本属性

6.1文本颜色

认识 RGB

我们的显示器是由很多的 "像素" 构成的. 每个像素视为一个点, 这个点能反映出一个具体的颜色.

我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色).三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.

计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).数值越大, 表示该分量的颜色就越浓.

color 属性值的写法:预定义的颜色值(直接是单词)、[最常用] 十六进制形式、 RGB 方式

代码示例：

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

6.2文本对齐

控制文字水平方向的对齐. 不光能控制文本对齐, 也能控制图片等元素居中或者靠右

center: 居中对齐

left: 左对齐

right: 右对齐

代码示例：

    <style>.one {text-align: left;}.two {text-align: right;}.three {text-align: center;}</style>
</head>
<body><div class="one">左对齐</div><div class="two">右对齐</div><div class="three">居中对齐</div>
</body>

6.3文本装饰

text-decoration: [值];

添加或去除文本修饰，如下划线、上划线、删除线等，常用取值有 underline 下划线、none 啥都没有. 可以给 a 标签去掉下划线、overline 上划线、 line-through 删除线

代码示例：

<style>.text-decorate .one {text-decoration: none;}.text-decorate .two {text-decoration: underline;}.text-decorate .three {text-decoration: overline;
}.text-decorate .four {text-decoration: line-through;
}
</style>
<body><div class="text-decorate"><div   class="one">啥都没有</div><div   class="two">下划线</div><br/><div   class="three">上划线</div><div   class="four">删除线</div></div>
</body>

6.4文本缩进

控制段落的首行缩进 (其他行不影响)

text-indent: [值];

单位可以使用 px 或者 em.

使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.

缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)

代码示例：

    <style>.text-indent .one {text-indent: 20px;}.text-indent .two {text-indent: -20px;}</style>
</head>
<body><div class="text-indent"><div class="one">正常缩进</div><div class="two">反向缩进</div></div>
</body>

6.5行高

HTML展示文字涉及到这几个基准线:顶线、中线、基线 (相当于四线格的倒数第二条线)、底线

内容区：底线和顶线包裹的区域，即下图深灰色背景区域

其实基线之间的距离 = 顶线间距离 = 底线间距离 = 中线间距离

<style>.line-height .one {line-height: 40px; font-size: 16px;}
</style>
<body>
<div class="line-height"><div>上一行</div><div class="one">中间行</div><div>下一行</div>
</div>