[ CSS 前端 ] 网页内容的修饰

一. CSS

1. 概述

2. 基本语法

(1)行内样式表

(2)内嵌样式表

(3)外部样式表

3. 选择器

(1)标签选择器:

(2)类选择器:

(3)通配选择器:

(4)后代选择器:

4. 基础样式

(1). 文本样式

(2). 背景样式

(3). 列表样式

5. 伪类

(1)定义:

(2)伪类的语法：

6. 透明度(opacity)

7. 块级行级标签

(1)块标签和行标签:

(2)改变标签类型(display):

(3)div和span标签

一. CSS

1. 概述

CSS(Cascading Style Sheets)级联样式表是一种样式表语言，可以控制HTML文档外观和布局例如:字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 .使用CSS可将页面的内容与表现形式分离，HTML文档中存放页面内容，而定义表现形式的CSS放在一个.css文件中或HTML文档的某一部分 ,便于管理.

2. 基本语法

(1)行内样式表

1) 定义: 通过标签的style属性来设置元素的样式,写在body里面

2) 格式: <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

3) 举例:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><!-- 方法一:行内样式表 --><p style="color:red;font-weight: 600;font-size: 20px;">静夜思</p><p style="color:red;font-weight: 600;font-size: 20px;">床前明月光</p><p style="color:red;font-weight: 600;font-size: 20px;">静疑是地上霜</p> </body>
</html>

(2)内嵌样式表

1) 定义: 将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

2) 格式:

<style type="text/css">

p { color:red; font-family:"隶书"; font-size:24px;}

</style>

3) 举例:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>/*方法二:内嵌样式表*/p{color:green;font-weight: 700;font-size: 20px;} </style></head><body><p>举头望明月</p><p>低头思故乡</p></body>
</html>

(3)外部样式表

1) 定义: 将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中

2) 举例:

CSS文件:

p{color:blue;font-weight: 700;font-size: 20px;
}

html文件:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link  href="css/index.css" rel="stylesheet"/> </head><body><p>举头望明月</p><p>低头思故乡</p><p>这是一个测试样例这是一个测试样例这是一个测试样例这是一个测试样例这是一个测试样例这是一个测试样例这是一个测试样例这是一个测试样例</p></body>
</html>

总结:

3. 选择器

(1)标签选择器:

通过标签选择器可以选择页面中的所有指定标签语法：标签名{ }

(2)类选择器:

通过标签的class属性值选中一组标签语法: .class属性值{ }

(3)通配选择器:

可以用来选中页面中的所有的标签语法: *{ }

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>/*标签选择器 优先级中等*/h3{color: blue;}p{color: gray;}/*类选择器 优先级高*/.p1{color: firebrick;}.p2{color: yellowgreen;}.p1,.p2{font-size: 30px;} /* p1,p2共同的属性 *//*通配选择器 能匹配所有的,优先级低*/  *{ font-style: italic; line-height: 40px;letter-spacing: 10px;}</style></head><body><h3 >静夜思</h3><p class="p1">床前明月光</p><p class="p2">疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p></body>
</html>

(4)后代选择器:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 后代选择器  */.u1 li{/* 对u1下的li进行修饰 */font-size: 20px;list-style-type: decimal;/* 设置列表项标志的类型 */list-style-position: outside;/* 设置列表项标志的位置 outside外面 inside里面 */}.u2 li{		list-style-position: outside;text-align: center;}</style></head><body><ul class="u1"><li><a href="#"> 首页</a></li><li><a href="#"> 学校概况</a></li><li><a href="#"> 招生就业</a></li><li><a href="#"> 教育教学</a></li></ul><ul class="u2"><li><a href="#"> 首页</a></li><li><a href="#"> 学校概况</a></li><li><a href="#"> 招生就业</a></li><li><a href="#"> 教育教学</a></li></ul></body>
</html>

4. 基础样式

(1). 文本样式

● color 字体颜色

● font-size 字体大小

● font-family 字体类型

● font-weight 字体粗细● font-style: italic 斜体文本

● text-align 文本对齐

● text-decoration: line-through /underline / none 文本中间划线 / 文本底部划线 / 文本取消划线

● font-style: italic 斜体文本

● line-height 设置行高

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

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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.p1.p2{font-size: 20px;/* 字体大小 */}.p1{color: green;font-weight: 700;/* 字体粗细 */font-family: 楷体;/* 字体 *//* text-decoration: line-through;/* 横线贯穿文本 *//* font-style: italic;  斜体字 */ text-decoration:underline;/* 文字底部横线 *//*line-height: 40px; 行高 *//*letter-spacing: 20px; 字间距 *//* text-indent: 20px;首行缩进像素大小 */text-indent: 2em;/* em是当前文本一个字的大小,会随着当前段落字体的大小改变而改变 */}h2{text-align: center;}a{text-decoration: none;/* 将超链接底部的横线去掉 */}</style></head><body><h2>静夜思</h2><p class="p1">列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志</p><p class="p2">列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志</p><a href="">百度</a><a href="">百度</a><a href="">百度</a>	</body>
</html>

(2). 背景样式

● background-color 背景颜色

● background-image 背景图片

● background-repeat 背景重复

注意需要提前将图片导入img文件夹

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style> .p1{background-color: beige;}.p2{  background-color: blue;/* 背景颜色 */background-image: url("img/2.jpg") ;/* 背景图片 */background-repeat: repeat-y;/* 向下重复: 当图片无法完全填充设定的宽和高时,会进行重复 *//* background-repeat: no-repeat;/* 背景是否重复 */ */background-size: cover;/* 背景大小覆盖整个标签区域 */width: 1800px;height: 1600px;}</style></head><body><p class="p1">hello</p><p class="p2"><img src="img/1.jpg" /></p></body>
</html>

(3). 列表样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 后代选择器  */.u1 li{/* 对u1下的li进行修饰 */font-size: 20px;list-style-type: decimal;/* 设置列表项标志的类型 *//* 	list-style-image:url("img/2.jpg") ; /* 将图象设置为列表项标志*/ */list-style-position: outside;/* 设置列表项标志的位置 outside外面 inside里面 *//* 简写方式 值数量 位置不受限制 *//* list-style: outside url("") none; */}.u2 li{/* font-size: 20px;list-style-type: none; *//* list-style-image:url("img/1.jpg") ; *//* list-style-position: inside; */list-style-position: outside;text-align: center;}</style></head><body><ul class="u1"><li><a href="#"> 首页</a></li><li><a href="#"> 学校概况</a></li><li><a href="#"> 招生就业</a></li><li><a href="#"> 教育教学</a></li></ul><ul class="u2"><li><a href="#"> 首页</a></li><li><a href="#"> 学校概况</a></li><li><a href="#"> 招生就业</a></li><li><a href="#"> 教育教学</a></li></ul></body>
</html>

5. 伪类

(1)定义:

伪类用来表示标签的特殊状态, 例如当鼠标移动或点击时,当前文本字体发生改变

(2)伪类的语法：

:hover 表示鼠标移入的状态

:active表示的是被点击的状态

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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 默认样式 */.p1{color: aqua;}/*鼠标移动到标签时,自动切换到此样式  */.p1:hover{color: green;}a{color:blue;text-decoration: none;}a:hover{color: red;font-size: 20px;text-decoration: underline;}/*鼠标点击后切换到此样式表  */a:active{color: green;/* 与鼠标放在上面的小狗不同*/}.t1:hover{background-color: antiquewhite;color: white;}.t1:active{color: red;background-color: plum;}/* 当输入标签获得鼠标焦点时,自动切换此样式 */input:focus{background-color: aquamarine;}</style></head><body ><p class="p1">这是一个段落</p><a href="">百度</a><a href="">百度</a><a href="">百度</a><hr /><input class="t1" type="button" value="保 存" /><hr /><input type="text" /><br /><input type="text" /><br /><input type="text" /><br /></body>
</html>

6. 透明度(opacity)

opacity: 透明度0-1之间 , 0是完全透明 1是不透明

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style></style></head><body ><img src="img/1.jpg" style="opacity:0.3 ;" /><!-- 透明度 0-1之间 0是完全透明 1是不透明 --></body>
</html>

7. 块级行级标签

(1)块标签和行标签:

块标签:无论内容有多少都会占一行,可以设置宽高例如: p h1 ol ul hr

行标签:只占内容自身大小,不能设置宽高,即使设置了,也不能生效例如: 超链接<a> 加粗<b>

(2)改变标签类型(display):

block : 块标签
inline : 行标签
none : 标签整个消失

(3)div和span标签

div标签: 块级标签,没有默认样式,里面可以放任何标签,是纯净版的块级标签,用于布局网页
span标签: 行级标签,没有默认样式,主要用来选中要修饰的文本内容,用于添加其他标签样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h3 style="=width: 300px; display: none;">3级标签</h3><b>aaaa</b><a href="" style="width: 100px; display: block;background-color: antiquewhite; text-align: center;">百度</a><!-- div标签是块级标签,标签没有任何的默认样式,里面可以放任何标签,是一个纯净版的块级标签--><div style="background-color: antiquewhite; width: 300px;">aaa<div>bbb</div><p>cccc</p></div><!-- span是一个行标签,没有任何默认样式 主要用来选中要修饰的文本内容,方便添加样式 --><p><span style="color: aquamarine;">腾讯</span>百度百度</p></body>
</html>