第一章 CSS基础

（1）css初识

• html主要做结构，显示元素内容
• css美化HTML，布局网页
• 结构与样式分离

css主要用于设置html页面中的文本内容（字体，大小，对齐方式等）， 图片的外形（宽度，边框样式，边框边距等）以及版面的布局和外观显示样式。【网页的美容师css】

（3）选择器

• 基础选择器--由单个选择器组成
• 3.1-标签选择器
• 3.2-类选择器
• 3.3-id选择器
• 3.4-通配符选择器
• 复合选择器
• 后代选择器
• 子代选择器
• 并集选择器
• 链接伪类选择器
• :focus 选择器

[3.1]类选择器

使用class来定义一个类

注意：

1.类选择器使用"."(英文点号)

2.可以理解给标签起了个名字，调用就是点名使用

3.如果名字比较长，可以用"-"来分隔，例如"class-one"

4.不要用纯数字，命名要有意义，尽量用英文

example:

• 冰雨
• 忆江南

<ul> <li class="color_red_eg">冰雨</li> <li>忆江南</li> </ul>

注：详情使用方法看源码

     类选择器口诀：样式点定义，结构类（class）调用 一个或多个 开发最常用

类名特殊使用-多类名:

    一个标签可以设置多个类名，中间要加空格分隔
无论使用哪个名字都可以设置样式，样式是同时使用的。

使用场景:

可以同时设置重复的样式，通常会在开发中使用,方便后期修改代码。

<!--<div class="color_red_eg red">--> <!-- <p><u>我不是例子</u></p>--> <!--</div>-->

[3.2]id选择器

    简介：id选择器可以为标有特定id的html元素指定样式,用id属性开设置id选择器
,css 中id选择器以"#",来定义。

1--id不能象class一样重复命名，一个html中的id是惟一的

2--类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和js一起使用。

--id选择器--

id选择器口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。

源码展示

html部分 <p id="id_text_1">--id选择器--</p> css部分 #id_text_1 { size: 15px; color: #03a9f4; }

[3.3]通配符选择器

简介：使用"*" 使用，可以修改整个页面的所有属性。

语法：

* { 属性值1：属性值2 ... }

• 通配符选择器不需要调用，自动给所有元素使用样式。
• 特殊情况下才会使用，后面讲解使用场景(一下是清除所有元素标签的内外边距)

<style> * { margin: 0; padding: 0; } </style>

[3.4]标签选择器

可以单独设置一类标签的格式。

语法：

<style> h1 { color: white; } </style>

[3.5]基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color:red}
类选择器	可以选出1个或多个标签	可以根据需求选择	非常的多	.nav {color:red}
id选择器	可以选出	可以根据需求选择	非常的多	.nav {color:red}
通配符选择器	选则所有的标签	选择的太多，有部分不需要	非特殊情况使用	* {color:red}

[3.6]链接伪类选择器

• a:hover 选择所有未访问的链接
• a:visited 选择所有已被访问的链接
• a:link 选择鼠标指针位于其上的链接
• a:active 选择活动的链接（鼠标按下未弹起的链接）

注意事项:

1. 为了确保生效，按照LVHA顺序声明:link - :visited - :hover - :active.
2. 记忆法 love hate 或者lv宝宝hao
3. 真正的开发中必须要按顺序使用伪类选择器
4. 因为a链接自带样式，所以在使用中要单独指定样式

实际开发实际用法:

1. 不是个链接伪类都要使用到
2. 一般使用要先声明a的样式，后面紧接相应的伪类选择器样式

[3.7]:focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况 类表单元素才能获取，因此这个选择器也主要真对表单元素来说。

用于设置光标在使用表单时的样式变化

把获得光标大的input表单元素选取出来。

语法：

input:focus { background-color:pink; color:red; }

[3.8]进阶选择器总结

选择器	作用	特点	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于 .nav>p
并集选择器	选择某些相通样式的元素	可以用于集体声明	较多	符号是逗号 .nav,header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和 a:hover 实际开发的写法
:focus伪类选择器	选择获得光标的表单	跟表单相关	较少	input:focus 记住这个写方法

(4)css的字体属性

• font-family 设置字体
• font-size 字号大小
• font-weight 字体粗细
• font-style 字体样式(斜体，下划线等)

具体看笔记

字体样式

(5)css文本属性

    一下属性可以设置文本的外观，比如文本颜色，对齐文本，装饰文本，，文本缩进，行间距等操作。

• [5.1]大纲
• [5.2]文本颜色
• [5.3]对齐文本
• [5.4]装饰文本
• [5.5]首行缩进
• [5.6]设置行间距

[5.1]大纲

1. 文本颜色--color
2. 对齐文本--text-align
3. 装饰文本--text-decoration

[5.2]文本颜色

值：

• 预定义的颜色值，即颜色英文名
• 各种颜色的16进制[开发中最常用]
• RGB代码(rgb(255,0,0)或rgb(100%,0%,0%))

<style> .align_text_1 { color: #03a9f4; } </style> <div class="align_text_1"> 测试 </div>

[5.3]对齐文本

    text-align属性用于设置设置文本元素内文本内容的水平对齐方式。

值：

1. left --文本左对齐（默认）
2. right --右对齐
3. cneter --居中对齐

[5.4]装饰文本

    text-decoration属性规定添加到文本额修饰，可以给文本添加下划线，删除线，上划线等。

值：

1. none -- 默认，没有装饰线(最常用)
2. underline -- 下划线，链接自带(常用)
3. overline -- 上划线，几乎不用
4. line-through -- 删除线，(不常用)

没有装饰线-none     underline-下划线     overline -- 上划线         line-through -- 删除线

源码：

<span>没有装饰线-none    </span> <span style="text-decoration: underline">underline-下划线    </span> <span style="text-decoration: overline">overline -- 上划线    </span> <span style="text-decoration: line-through">    line-through -- 删除线</span>

用途有一个：可以去掉超链接自带的下划线

这是一个超链接 <a href="https://www.bilibili.com/" style="text-decoration: none">这是一个超链接</a>

[5.5]首行缩进

    text-indent用来设置段落中的首行缩进

语法：text-indent: 2em/20px

值：

• 20px(可以设置成多少像素)
• 2em(也可以设置成相比第二行多少个字的距离)
  em是一个相对单位，就是当前元素的(font-size)一个文字的大小，

通过使用 CSS 我们可以大大提升网页开发的工作效率！ 在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。

源码：

<p style="text-indent: 2em"> 通过使用 CSS 我们可以大大提升网页开发的工作效率！ 在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。 </p>

[5.6]设置行间距

语法：

line-height: 文字高度加上下间距

还可以设置段落之间的行高
即:p {
line-height: 26px;
}

回到顶部