CSS

最新推荐文章于 2024-09-15 21:53:51 发布

不可爱仙女

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量330

点赞数 2

文章标签： css css3

本文链接：https://blog.csdn.net/rraxx/article/details/103994483

版权

CSS介绍

CSS发展原因

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

CSS初识

CSS（Cascading Style Sheets）通常称为CSS样式表或层叠样式表（级联样式表),主要用于设置HTML页面中的文本内容(字体，大小啊，对齐方式，颜色等)
注：
1.选择器用于指定CSS样式作用的HTML对象，{}内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
可以用段落和表格的对齐的演示

font字体

font-size:字号大小

用于设置字号，可以使用相对长度，也可以使用绝对长度单位。
一般使用px

font-family:字体

用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。
p{ font-family:"微软雅黑";}

eg:h1{
font-family:“微软雅黑”;
}
注：

现在网页中普遍使用14px+。
尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

CSS Unicode字体

在 CSS 中设置字体名称，可以直接写中文。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。因此：

使用英文来替代，比如 font-family:“Microsoft Yahei”(微软雅黑)
直接使用 Unicode 编码,比如font-family: “\5FAE\8F6F\96C5\9ED1”(微软雅黑)

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

font-weight:字体粗细

normal:正常大小，400
bold:粗体，700
字体大小在100~900（必须为100的整数倍）

注释：

在这里插入图片描述

font-style字体风格

normal: 正常字体
italic: 倾斜字体
oblique:人为倾斜字体
(一般使用此方法让倾斜文字变不倾斜)
在这里插入图片描述

字体综合设定

选择器（font: font-style font-weight font-size/line-height(行高) font-family;)
注

使用font属性时，必须按照上面的语法格式顺序书写，不可更换顺序，各个属性以空格隔开
其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family。否则font属性不起作用。

在这里插入图片描述

css基本选择器

调试

使用调试工具chrome；

在这里插入图片描述

使用f12/CTRL+shift+l，左边是html,右边是css；
点开左边结构，箭头指向的6就是错误行数
图3 就是改错之后，可以点击颜色图标去修改字体颜色
ctrl+滚轮或+，-可以修改代码大小

在这里插入图片描述

选择器（选择符）

标签选择器（元素选择器）

标签名{属性1：属性1的值；属性2：属性2的值；属性3：属性3的值;}
更改某一类标签，但不可差异化更改

体会类选择器

.类名{属性1：属性1的值；属性2：属性2的值；属性3：属性3的值;}调用时使用 class=“类名”
在这里插入图片描述

命名规范

长名称或词组可以使用-来为选择器命名。
不建议使用"_"下划线来命名。
不要用纯数字或者中文来命名。

多类名选择器

样式显示效果跟HTML元素中的类名先后顺序无关，受css样式书写的上下顺序有关。
各个类名中间用空格隔开。

ID选择器

ID选择器和类选择器使用方法相同
.id {属性1：属性1的值；属性2：属性2的值；属性3：属性3的值;}

在这里插入图片描述

ID选择器和类选择器的区别

类选择器可以重复多次使用的(类似于人名)
ID选择器是唯一的,只能使用一次(类似于身份证号).

通配符选择器(适用范围最广)

*{属性1：属性1的值；属性2：属性2的值；属性3：属性3的值;}
星号指的是所有的意思。
在这里插入图片描述

链接伪类选择器

用于向某些选择器添加特殊的效果(用：表示)

:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接，我们点过的链接*/
lvha顺序尽量不要颠倒

链接伪类的简写方式

一般记这个就ok

在这里插入图片描述

结构伪类选择器

:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式
- ：nth-child(odd/2n+1/2n-1):选择所有的奇数
- ：nth-child(even/2n):选择所有的偶数，n是从0开始算