CSS

CSS

CSS概念

CSS是Cascading Style Sheets(级联样式表)

CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.CSS文件中或文档的某一部分。

级联：关联 两个事物之间的关系 指的是网页内容 和 修饰网页内容的css语法

​ 理念是将网页和样式分离，这样重复的样式只需要定义一次即可

样式表：修饰网页内容的语法的集合

作用：修饰网页内容的外观、文本、背景、列表、定位

关系：HTML 网页内容

​ CSS 网页的样式，外观

CSS基本语法

行内（行级）样式表

<p style="color:red;font-size:24px">床前明月光，</p>

内嵌样式表

<style type="text/css">
p{
    color:green;
    font-size:20px;
}
</style>

外部样式表

<!--导入外部的样式表-->
<link href="css/out.css" rel="styleheet"/>

选择器

要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器。

常用的选择器1：

• 标签选择器：通过标签选择器可以选择页面中的所有指定标签

​ 语法：标签名{}

• 类选择器：通过标签的class属性选中一组标签

  语法：.class属性值{}

• id选择器：通过标签的id属性值选中唯一的一个标签

  语法：#id属性值{}

• 选择器组合：通过通过选择器分组可以同时选中多个选择器对应的标签

  语法：选择器1，选择器2，选择器N{}

• 通配选择器：可以用来选中页面中的所有标签

  语法：*{}

常用的选择器2：

• 后代选择器：选中指定标签的指定后代标签

  语法：祖先标签 后代标签{}

• 子标签选择器：选中指定父标签的指定子标签

  语法：父标签 > 子标签

• 选中指定标签的相邻标签

  语法：选择相邻选择器：器 + 相邻{}

• 兄弟选择器：选择指定标签的兄弟标签

  语法：选择器 ~ 兄弟{}

• 后代标签：直接或间接被祖先标签包含的标签，子标签也是后代标签

• 兄弟标签：拥有相同父标签的标签叫做兄弟标签

样式的继承：在CSS中，祖先标签上的样式，也会被他的后代标签所继承，利用继承，可以将一些基本的样式设置给祖先标签，这样所有的后代标签将会自动继承这些样式。

文本

color: 字体颜色

font-size: 字体大小

font-family: 字体

text-align: 文本对齐

text-decoration: line-through: 定义穿过文本下的一条线

text-decoration:underline: 定义文本下的一条线

text-decoration:none: 定义标准的文本

font-style:italic: 斜体文字

font-weight: 字体粗细

line-height:设置行高

letter-spacing:可以指定字符间距

text-indent: 用来设置首行缩进

背景

background-color背景颜色

background-image背景照片

background-repeat背景重复

background-size背景尺寸

background-position背景位置

CSS列表

CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志

• list-style-image 将图象设置为列表项标志。

• list-style-position 设置列表中列表项标志的位置。

• list-style-type 设置列表项标志的类型。

• list-style 简写属性。

CSS伪类

CSS伪类专门勇来表示标签的一种特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类。

伪类的语法：

:link 表示普通的链接（没访问过的链接）

:visited: 表示访问过的链接

• 浏览器是通过历史记录来判断一个链接是否访问过
• 使用visited伪类只能设置字体的颜色

:hover伪类表示鼠标移入的状态

:action表示是被点击的状态

注意：visited必须被放置于 :hover之后，才是有效的

​ :hover和:action也可以为其他标签设置

​ :focus向拥有键盘输入交焦点的标签添加样式

透明

定义透明效果的属性是opacity

opacity属性设置标签的不透明级别值为1。

规定不透明度：从0.0（完全透明）到1.0（完全不透明）。

举例

/表示未访问过的链接地址/

a:link{

​ color:#008000;

​ text-decoration:none;

}

/访问过的状态/

a:visited{

​ color:#FF0000;

}

/表示鼠标移动到标签上/

a:hover{

​ color: blue;

​ text-decoration: underline;

}

/鼠标点击状态/

a:action{

​ color:#00FFFF;

}

具体案例

p:hover{

​ color: white;

​ background-color: #00FFFF;

​ }

​

p:active{

​ background-color: #FF0000;

​ }

​

.btn:hover{

​ background-color: #00FFFF;

​ }

.btn:active{

​ background-color: #0000FF;

​ }

​

​ /* 针对于可以输入内容的标签*/

.inp:focus{

​ background-color: #FFA500;

​ }

​ <!–

​ 伪类:就是css为处在不同状态(例如鼠标移动到标签上,鼠标点击标签)下的标签设置样式

​ -->

​

​ 这是一个段落

​

​

​

​

​

​