WEB_Day02(CSS简介、样式规则、字体样式属性、选择器、注释、外观属性、样式表、标签的显示模式、复合选择器)
WEB_Day02(CSS简介、样式规则、字体样式属性、选择器、注释、外观属性、样式表、标签的显示模式、复合选择器)
CSS简介
CSS 通常称为CSS样式表或者层叠样式表（级联样式表）。主要用于设置HTML页面中的文本内容（字体 大小 对齐方式） ，图片（宽度、高度、边框、边距等） 版面的布局.
CSS是以HTML为基础，提供丰富的各种功能 ，字体、颜色、背景、的控制，整体的排版，而且还可以针对不同的浏览器设置不同的样式。
CSS样式规则
<style>
h1 {
color: red;
font-size: 20px;
}
body {
background-color: seagreen;
}
</style>
规则：
- h1 和body 是选择器 用于指定css样式作用的HTML对象，花括号内部是对该对象设置的具体的样式。
- 属性和属性值以键值对的形式出现
- 属性是对指定的对象设置样式属性。
- 属性和属性值之间以英文的冒号连接
- 多个键值对之间按使用英文的分号区分。
CSS字体样式属性
字体的大小 font-size：
设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，其中相对长度单位比较常见，推荐使用px（像素）
可以使用绝对长度：
px像素，in 英寸，cm 厘米，mm 毫米，pt 点
字体的设置 font-family：
在表示字体的时候，可以使用英文，也可以使用中文字体，如果当我们使用英文字体名称的时候，此时如果字体的名称是由一个单词组成，则可以直接写，如果是由多个单词组成，则需要加双引号或者单引号
中文字体名一般都需要使用单引号或者双引号引起来
font-family: '华文中宋', Courier, monospace;
- 在网页中，普遍使用的字号为14px
- 尽量使用偶数的数字字号，因为在ie6中 对奇数的支持有bug
- 各种字体之间必须使用英文的逗号分割
- 中文字体需要加上英文的引号
- 可以同时设置多个字体，多个字体之间是一种备选关系。
- 在使用字体的时候尽量使用一些系统默认的常规字体
字体的粗细 font-weight：
<b>字体的粗细程度</b>
<strong>这是第二种设置字体的粗细</strong>
使用CSS实现字体的粗细程度的设置可选的值：
数字的范围：100-900
属性值：normal（400） bold（700） bolder lighter
字体的风格 font-style：
主要设置字体是否倾斜，相应的标签 i 和 em
<b><i>字体的粗细程度</i></b>
<strong><em>这是第二种设置字体的粗细</em></strong>
Nomal：默认值，浏览器显示为标准字体
Italic：斜体的字体
Oblique：显示为倾斜
字体的综合设置：
font: oblique 700 40px "楷体";
具体语法：选择器：{font： font-style font-weight font-size font-family}
在使用的过程中，必须严格遵循上边的语法，顺序不能更换
其中的一些属性是可以省略，省略之后可以取它的默认值，但是必须保留 font-size 和 font-family ，否则font属性将不起作用
选择器（重点）
标签选择器（元素选择器）：
使用HTML标签名作为选择器。
语法：
标签名【元素名】{属性：属性值；属性：属性值}
<div>
<b><i>字体的粗细程度</i></b>
<strong><em>这是第二种设置字体的粗细</em></strong>
</div>
<div>
使用CSS来改变字体的粗细程度
</div>
div {
/* font-size: 35px;
font-weight: 400;
font-style: oblique; */
font: 40px "楷体";
}
类选择器：
类选择器使用“.”(英文的点号) 进行标识，后面紧跟类名
语法：
.类名{属性：属性值；属性：属性值}
完成上边google样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color: cadetblue;
width: 500px;
height: 200px;
}
span {
font-size: 100px;
font-weight: 800;
}
.blue {
color: blue;
/* color 设置前景色 字体颜色*/
}
.red {
color: red
}
.orange {
color: orange;
}
.green {
color: green;
}
</style>
</head>
<body>
<div>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</div>
</body>
</html>
类名选择器可以实现样式的复用
多类名选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color: cadetblue;
width: 500px;
height: 200px;
}
span {
font-size: 100px;
font-weight: 800;
}
.blue {
color: blue;
/* color 设置前景色 字体颜色*/
}
.red {
color: red
}
.orange {
color: orange;
}
.green {
color: green;
}
.f {
font: 200px "楷体"
}
</style>
</head>
<body>
<div>
<span class="blue f">G</span>
<span class="red">o</span>
<span class="orange f">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</div>
</body>
</html>
id选择器：
id选择器是通过元素的id属性来进行选择，同时使用id选择元素的时候，需要使用#来进行标识
语法：
#id{属性：属性值；属性：属性值}
当我们使用id选择器的时候必须保证选择的元素具有id属性，id 属性是唯一的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#d1 {
width: 200px;
height: 200px;
background-color: greenyellow;
}
#d2 {
width: 100px;
height: 100px;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
</div>
</body>
</html>
id选择器和类选择器最大的不同在于使用的次数上
通配符选择器：
通配符*来标识，它是所有选择器中作用范围最广的，可以匹配页面中所有的元素
*{属性：属性值；属性：属性值}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#d1 {
width: 200px;
height: 200px;
background-color: greenyellow;
margin-left: 100px;
margin-top: 50px;
padding-left: 10px;
}
#d2 {
width: 100px;
height: 100px;
background-color: hotpink;
}
* {
margin: 0;
/*设置外边距*/
padding: 0;
/*内边距*/
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
</div>
</body>
</html>
使用通配符设置的样式适用于所有的元素
伪类选择器：
伪类选择器：用于向某些选择器添加特殊的效果
连接伪类选择器：
- :link 未访问的连接
- :visited 已访问的连接
- :hover 鼠标移动到连接上
- :active 选定的连接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
font-weight: 700;
font-size: 25px;
color: gray;
}
a:hover {
color: red;
}
a:visited {
color: green;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
结构（位置）伪类选择器：
- :first-child 选取属于父元素的首个子元素的指定的选择
- :last-child 最后一个子元素
- :nth-child(n) 匹配属于父元素的第n个子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
font: 100px "楷体"
}
ul {
margin-left: 50px;
}
/* li:first-child {
color: red;
}
li:last-child {
color: green;
}
li:nth-child(3) {
color: orange;
} */
li:nth-child(even) {
/*选择偶数的元素*/
color: red;
}
li:nth-child(odd) {
/*选择奇数的元素*/
color: green;
}
li:nth-child(2n) {
/*2的倍数的元素 还可以表示其他的倍数 3的倍数的表示3n 在样式设置中，后边的样式会覆盖掉前边的样式*/
color: greenyellow;
}
</style>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>橙子</li>
<li>西瓜</li>
</ul>
</body>
</html>
目标伪类选择器：
- :target目标伪类选择器，可用于选择当前活动的目标元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#a1:target {
color: red;
}
</style>
</head>
<!--
当点击a标签的时候 a标签此时是连接到h1的。 此时的h1就是a标签的目标 所以我们看到的效果就是h1标签的元素的颜色编变成了红色
-->
<body>
<h1 id="a1">山西太原</h1>
<a id="a2" href="#a1">中北大学</a>
</body>
</html>
注释
/*
这是css的注释
*/
<!--
这是html的注释
-->
CSS外观属性
color 文本颜色：
Color属性的取值方式有三种：
- 预定义颜色值，如：red、green、blue、pink等
- 十六进制，如 #ffffff 白色，#000000 黑色，对于这种两位十六进制表示RGB中的一种颜色 如果相邻两位的十六进制相同则可以省略，如：#fff #000
- RGB表示方式，如红色rgb(255,0,0) 还可以使用百分数 rgb(100%,0%,0%) 当使用rgb表示颜色，且使用百分数的时候即使取值为0百分号也不能省略
行间距 line-height：
行间距在设置的时候一般需要根据字号来设置，一般行间距比字号大7-8个像素即可
行间距的设置可以使用像素 px、百分比 %、em
<style>
body {
background-color: burlywood;
}
p {
font: 25px "宋体";
color: rgb(100%, 0%, 0%);
line-height: 33px;
}
</style>
</head>
<body>
<p>Color属性的取值方式有3中：
1 预定义颜色值 如：red green blue pink等
2 十六进制 如 #ffffff 白色 #000000黑色 对于这种两位十六进制表示RGB中的一种颜色 如果相邻两位的十六进制相同 则可以省略 #fff #000
3 RGB表示方式 如红色rgb(255,0,0) 还可以使用百分数 rgb(100%,0%,0%) 当使用rgb表示颜色 且使用百分数的时候 即使取值为0 百分号也不能省略
</p>
水平对齐方式 text-align：
可取值：left、right、center
该属性相当于html中align属性
text-align: center;
首行缩进text-indent：
设置段落首行缩进，属性值可以为不同的单位的数值，像素、百分比，是一个相对值，em（字符宽度的倍数）
2em就是缩进两个汉字
text-indent: 2em;
字间距 letter-spacing：
可以使用不同单位的数值，也可以是相对值，对于中文指的是两个汉字之间的空白间隙，而对英文，则是字母之间的间距
letter-spacing: 20px;
单词间距 word-spacing：
主要用于设置英文单词之间的间距，对中文字符无效
word-spacing: 20px;
颜色的半透明：
Color：rgba(r,g,b,a) a表示透明度，a的取值范围是0-1
color: rgb(100%, 0%, 0%, 0.8);
字体阴影：
Text-shadow：水平位置、垂直位置、模糊距离、阴影颜色
水平位置和垂直位置必须设置，后边模糊距离和阴影颜色可省略
text-shadow: 10px 10px 20px gray;
CSS样式表的使用（书写位置）
行内样式表（内联式）：
通过标签的style属性来设置元素的样式
<标签名 style=“属性名：属性值;属性名：属性值”>
style属性是所有的html元素所共同拥有的一个属性
<p style="font-size: 20px;font-weight: 700; color: greenyellow;">
全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果
</p>
该方式一般不推荐使用，导致html代码和css代码混合，不好维护
内部样式表（内嵌式）：
是在head中使用style标签来定义样式
之前我们的使用都是内部样式表
<style>
body {
background-color: burlywood;
}
p {
font: 25px "宋体";
color: rgb(100%, 0%, 0%, 0.8);
line-height: 33px;
text-align: left;
text-indent: 2em;
/* letter-spacing: 20px; */
word-spacing: 20px;
}
div {
font: 200px "楷体";
text-shadow: 10px 10px 20px gray;
}
</style>
一般位于head，也可以写在其他位置
外部样式表（外联式）推荐方式：
将样式单独定义在一个css文件中，在需要使用的时候引入该样式文件即可
-
创建一个样式文件，该文的扩展名为.css
-
在样式文件中编写相应的样式
-
在需要使用该样式的html文件中使用link标签连接到该样式文件
<!--
href :指定连接的外部样式文件的路径
type 定义连接文档的类型 如果式css文件 改值只能为txt/css
rel 定义当前文档与被连接文档的之间的一个关系 这里取值只能为stylesheet
-->
<link href="css/index.css" type="text/css" rel="stylesheet" />
三种方式的比较：
| 样式表 | 优点 | 缺点 | 优先级 |
|---|---|---|---|
| 行内样式表 | 书写方便 | 没有分离代码 | 不便于维护 |
| 内嵌样式表 | 内部实现了分离 | 没有完全分离 | 次之 |
| 外部样式表 | 实现了彻底分离 | 需要单独引入 | 最低 |
将来在开发中，如果拿到前端人员做出来的页面，觉得样式有不合适的地方，需要修改，此时最好不要取改变原来的样式文件， 可以采用选择优先级高的样式表来修改当前你需要修改的样式
标签的显示模式
HTML中的标签一般分为块标签和行内标签，它们也称为块元素和行内元素
块级元素：
每一个块级元素通常都独占一行或者多行，可以对其设置宽度、高度、对齐方式等属性，常用于网页布局和网页结构的搭建
常见的块级元素：
标题标签<h1>~<h6> <p> <div> <ul> <ol> <li>
div是块级元素的典型代表
块级元素的特点：
- 总是从新行开始
- 宽、高、边距都是可控的
- 宽度默认是100%
- 可以容纳内联元素和其他的块元素
行内元素：
行内元素不独占一行，该元素所占有的空间大小仅仅只是依靠其本身的内容来支撑。一般不可以设置宽度、高度、对齐方式等属性 。常用于控制页面中文本的样式
常见的行内元素： a strong b em I del s ins u span
span是行内元素的代表
Del s 删除线 ins u 下划线
行内元素的特点：
- 和相邻元素位于同一行
- 宽高的设置是无效的，但内边距是可以设置，外边距设置时只能设置水平方向
- 默认的宽度就是本身所容纳的内容的宽度
- 行内元素只能容纳文本或者其他的行内元素（a特殊）
行内块元素：
行内元素中有几个特殊的标签 img input td 可以对他们设置宽度和对齐方式 。有些地方将其称为行内块元素
行内块元素的特点 ：
- 相邻元素在一行但是之间会存在缝隙
- 默认的宽度也是内容的宽度
- 宽度、行高、外边距以及内边距都可以控制
<img src="imgs/timg.jfif" width="200" height="200" />
<img src="imgs/timg.jfif" width="200" height="200" />
转换标签的显示模式Display：
- 块级标签转换为行内标签 display：inline
- 行内标签可以转换为块级标签 display ： block
- 转换为行内块标签 display inline-block
<ul>
<li><a href="#">首页</a></li> |
<li><a href="#">简介</a> </li> |
<li>关于我们</li>
</ul>
可以将ul转换为导航栏
li {
display: inline;
}
CSS复合选择器
复合选择器就是由两个或两个以上的基础选择器，通过不同的方式组合而成，目的是为了可以选择更准确的目标元素。
交集选择器：
由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格
<style>
h1.c1 {
color: red;
font-size: 50px;
}
</style>
<h1 class="c1">交集选择器</h1>
并集选择器：
使用多个选择器，多个选择器之间使用逗号分割，可以是任意基础选择器
<style>
h1,
.c1 {
color: red;
font-size: 50px;
}
</style>
<h1 class="c1">交集选择器</h1>
<h2 class="c1">并集选择器</h2>
后代选择器：
后代选择器又称为包含选择器，用来选择元素或元素组的后代，写法把外层标签写在前面 内存标签写在后面，中间使用空格分割
div h3 {
color: lawngreen;
}
<div>
<h3>
后代选择器
</h3>
</div>
子元素选择器：
只能选择作为某元素子元素的元素，写法把父级元素写在前面，子级元素写在后边，中间使用>来进行连接
ul>li {
color: lawngreen;
}
<div>
<ul>
<li>公司首页</li>
<li>公司简介</li>
<li>公司产品</li>
<li>联系我们</li>
</ul>
</div>
属性选择器：
通过元素的属性来选择目标元素
| 选择器 | 意义 |
|---|---|
| E[attr] | 选择具有attr属性的元素 |
| E[attr=val] | 选择具有attr且值为val的元素 |
| E[attr*=val] | 选择属性值里包含val字符的且在任意位置 |
| E[attr^=val] | 属性值包含val且在开始位置 |
| E[attr$=val] | 属性值包含val且在结束位置 |
li[type] {
border: 1px solid gray;
}
li[type="vegetable"] {
background-color: green;
}
<ul>
<li type="fruit" color="green">西瓜</li>
<li type="vegetable" color="greenyellow">西兰花</li>
<li type="meat">牛肉</li>
<li type="meat hot">猪肉</li>
</ul>
伪元素选择器：
- E::first-letter 文本的第一个单词或字
- E::first-line 文本的第一行
- E:: selection 可改变选中的文本的样式
p::first-letter {
font-size: 20px;
color: red;
}
p::first-line {
color: royalblue;
}
p::selection {
color: goldenrod;
}
可以给元素的开始和结束添加内容，但是必须结合content属性