CSS语法基础认知、选择器、字体和文本样式、Chrome调试工具-CSDN博客

本文链接：https://blog.csdn.net/nupotian/article/details/131542345

36.体验CSS

36.1CSS的介绍

CSS：层叠样式表（cascading styles sheets ）

CSS作用：给网页中的HTML标签设置样式

36.2 CSS语法规则

CSS写在style标签中，style标签一般写在head标签里面，title标签下面。

<style type="text/css">
        p {
            /* 文字颜色变红色 */
            color: red;
            /* 字变大 px:像素 */
            font-size: 30px;
            /* 背景颜色 */
            background-color: green;
            /* width  height; */
            width: 400px;
            height: 400px;
        }
</style>

37. CSS引入方式

37.1 内嵌式

CSS写在style标签中，style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中。

   <style>
        h2{color: red;}
    </style>

37.2外联式

CSS 写在一个单独的.css文件中，需要通过link标签在网页中引入

  <link rel="stylesheet" href="./my.css">

37.3行内式

CSS 写在标签的style属性中，基础班不推荐使用，之后会配合js使用

<div style="color: green;font-size: 30px;">这是一个DIV标签</div>

引入方式	书写位置	作用范围	使用场景
内联式	CSS写在style标签中	当前页面	小案例
外联式	CSS单独写在单独的CSS中，通过link标签引入	多个页面	项目中
行内式	CSS写在标签的style属性中	当前标签	配合js使用

38.-选择器-标签

38.1 标签选择器

结构：标签名{CSS属性名:属性值;}

作用：通过标签名，找到页面中所有这类标签，设置样式。

注意点：

1.标签选择器，选择的是一类标签，而不是单独某一个。

2.标签选择器无论嵌套关系有多深

<style>
p{color: green;}
</style>

39.选择器-类

结构：.类名{CSS属性名:属性值;}

作用：通过类名,找到页面中所有带这个类名的标签，设置样式

注意点：

所有标签上都有class属性，class属性的属性值为类名（类似于名字）

类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

一个标签可以同时有多个类名，类名之间可以空格隔开

类名可以重复，一个类选择器可以同时选中多个标签

.red{color: red;}
<p class="red">这个标签文字要变红色</p>

40.id选择器

结构：#id属性值{css属性名:属性值;}

作用：通过id属性值，找到页面中带有这个di属性值的标签，设置样式

注意点：

1.所有标签上都有id属性

2.Id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的

3.一个标签上只能有一个id属性值

4.一个id选择器只能选中一个标签

#blue{color: green;}
<div id="blue">这个div文字是蓝色的</div>

class类名与id属性值的区别

• class类名相当于姓名，可以重复，一个标签可以同时有多个class类名

• id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

➢ 类选择器与id选择器的区别

• 类选择器以 . 开头

• id选择器以 # 开头

➢ 实际开发的情况

• 类选择器用的最多

• id一般配合js使用，除非特殊情况，否则不要使用id设置样式

• 实际开发中会遇到冗余代码的抽取（可以将一些公共的代码抽取到一个公共的类中去）

41.通配符选择器

结构：*{css属性名:属性值;}

作用：找到页面中所有的标签，设置样式

注意点：

开发中使用极少，只会在极特殊情况下才会用到
在基础班小页面中可能会用于去除标签默认的margin和padding

*{margin:0;padding:0;}

42.字体和文本样式

42.1 字体大小

属性名:font-size

取值：数字+px

注意点：

谷歌浏览器默认文字大小是16px

单位需要设置。否则无效

 p{font-size: 24px;}

42.2 字体粗细

属性名：font-weight

取值：

正常：normal，加粗bold

纯数字：100~900的整百数

正常：400，加粗700

注意点：

不是所有字体都提供了九种粗细，因此部分取值页面中无变化，实际开发中以：正常，加粗两种取值使用最多

 div{font-weight: 700;}

42.3 字体样式（是否倾斜）

属性名：font-style

取值：

正常（默认值）：normal

倾斜：italic

 p{font-style: italic;}

43.文字-字体

43.1 常见字体系列（了解）

无衬线字体（sans-serif）

特点:文字笔画粗细均匀，并且首尾无装饰
场景：网页中大多采用无衬线字体
常见该系列字体：黑体、Arial

衬线字体（serif）

1.特点：文字笔画粗细不均，并且首尾有笔锋装饰

2.场景：报刊书籍中应用广泛

常见该系列字体：宋体、Times New Roman

等宽字体(monospace)

特点：每个字母或文字的宽度想等
场景：一般用于程序代码编写，有利于代码的阅读和编写
常见该系列字体：consolas，fira code

42.2 字体系列font-family

属性名:font-family

常见取值：具体字体1,具体字体2,具体字体3…,字体系列

具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……

字体系列：sans-serif、serif、monospace等……

渲染规则：

1.从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体

2.如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点：

如果字体名称中存在多个单词，推荐使用引导包裹
最后一项字体系列不需要引导包裹
网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正常显示

44.拓展-层叠性

问题：给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？

结果：如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效

所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

div{color: red;color: green;}会显示绿色

45.font复合属性

属性名:font(复合属性)

取值：font: style weight size family;

省略要求：

只能省略两个,如果省略了相当于设置了默认值

注意点：如果需要同时设置单独和连写形式

要么把单独的样式写在连写的下面

要么把单独的样式写在连写的里面

p{font:ialic 700 66px 宋体;}

46.文本缩进

属性名：text-indent

取值：

数字：px

数字+em（推荐1=当前标签的font-size的大小）

47.文本水平对齐方式

属性名：text-align

取值：left(左对齐)，center(剧中对齐)，right(右对齐)

注意点：如果需要让文本水平居中，text-align属性给文本所在标签(文本的父元素)设置

text-align : center 能让哪些元素水平居中？

文本 2. span标签、a标签 3.input标签、img标签

注意点：

如果需要让以上元素水平居中，text-align : center 需要给以上元素的父元素设置

48.文本修饰

属性名：text-decoration

取值：

Underline：下划线（常用）

line-through：删除线（不常用）

overline：上划线（几乎不用）

none:无装饰线（常用）

注意点：开发中会使用text-decoration:none清除a标签默认的下划线

49.行高

作用：控制一行的上下行间距

属性名：line-height

取值：

数字+px

倍数（当前font-sizie 的倍数）

应用：

让单行文本垂直居中可以设置line-height：文字父元素高度
网页精准布局，会设置line-height：1可以取消上下间距
行高与font连写的注意点;

如果同时设置了行高和font连写，注意覆盖问题，font : style weight size/line-height family ;

50.谷歌调试工具

打开方式：①右击→检查②看哪里

选择元素：两种常见方法

控制样式：①修改属性值②添加属性③控制样式生效

特殊情况：①出现删除线②出现小三角形

51.颜色常见取值

属性名：

如文字颜色;color

如背景颜色：background-color

属性值：

51.1取值类型①：关键词

常见颜色取值：

red：红色

green：绿色

blue：蓝色

yellow：黄色

orange：橘色

skyblue：天蓝色

pink：粉色

51.2 取值类型②：rgb表示法

每项取值范围：0~255

常见颜色取值：

rgb ( 255 , 0 , 0 ) ：红色

rgb ( 0 , 255 , 0 ) ：绿色

rgb ( 0 , 0 , 255 ) ：蓝色

rgb ( 0 , 0 , 0 ) ：黑色

rgb ( 255 , 255 , 255 ) ：白色

51.3 rgba表示法

其实，比rgb表示法多个一个a，a表示透明度

a的取值范围：0~1

1：完全不透明

0：完全透明

省略写法：

rgba ( 0 , 0 , 0 , 0.5 ) 可以省略写成 rgba ( 0 , 0 , 0 , .5 )

51.4 十六进制表示法

取值范围：两个数字为一组，每个数字的取值范围：0~9 , a , b , c , d , e , f

省略写法：

如果三组中，每组数字都相同，此时可以每组可以省略只写一个数字

正确写法：#ffaabb改写成#fab

常见取值：

#fff：白色，#000：黑色

注意点：

类似于：#ffaabc不能改写成#fabc
实际开发中会直接使用测量工具直接得到颜色，不需要前端自己设计颜色，直接复制粘贴即可。

52.标签水平居中

如果需要让div、p、h（大盒子）水平居中？

可以通过margin : 0 auto ; 实现

注意点：

1. 如果需要让 div、p、h（大盒子）水平居中，直接给当前元素本身设置即可

2. margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度