标签：样式 标签 语法 样式表 文本属性 选择器 CSS 属性

CSS

CSS时层叠样式 表 （Cascading Style Sheets）的简称，有时也会称之为CSS样式表或级联样式表

CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）和样式（CSS）相分离

1.CSS语法规范

CSS规则由两个主要的部分构成：选择器以及一条或多条声明

• 选择器时用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
• 属性和属性值以”键值对“的形式出现
• 属性是对指定的兑现设置的样式属性，例如字体大小、文本颜色等
• 属性和属性值之间用英文 " : "分开
• 多个”键值对“之间用英文" ; "分开

2.CSS代码风格

2.1样式格式书写: 展开格式

2.2一般用小写

2.3空格：属性值前面，冒号后面保留一个空格，选择器和大括号中间保留空格

CSS基础选择器

• 选择器分为基础选择器和复合选择器两个大类
• 基础选择器是由单个选择器组成的
• 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

1.标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

把某一类的标签全部选择出来，比如所有的

标签和所有的 标签，能快速为页面中同类型的标签同意设置样式，不能差异化设置

2.类选择器

1.如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

• 类选择器口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用
• 类选择器用"."来进行标识，后面紧跟自定义类名
• 长名称或词组可以使用中横线来为选择器命名

2.我们可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签，简单理解就是一个标签有多个名字

可以把一些标签相同的样式放到同一个类里，

3.id选择器

id选择器可以为标有特点id的HTML元素指定特定的样式，HTML元素以id属性来设置id选择器。CSS中id选择器以”#“来定义

调用id = ”id名“

• id选择器口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用
• 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

4.通配符选择器

在CSS中，统配符选择器使用” * “定义，它表示选取页面中所有元素（标签）

• 通配符选择器不需要调用，自动就给所有的元素使用样式
• 特殊情况使用

5.基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p{color:red;}
类选择器	可以选出一个或者多个标签	可以根据需求选择	非常多	.nav{color：red；}
id选择器	一次只能选择一个标签	ID属性只能在美国HTML文档中出现一次	一般和js搭配	#nav{color:red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	*{color:red;}

CSS字体属性

CSS Fonts(字体)属性用于定义字体系列、大小、粗细和文字样式（如斜体）

1.字体系列

CSS使用font-family属性来定义文本的字体系列

2.字体大小

CSS使用font-size属性定义字体大小

• px(像素)大小是我们网页最常用的单位，谷歌默认16px，给body指定整个页面文字的大小
• 标题标签比较特殊，需要单独指定大小

3.字体粗细

CSS使用font-weigth属性来设置文字粗细

4.文字样式

CSS使用font-style属性设置文本的风格

属性值	作用
normal	默认值，浏览器会显示标准的字体样式，font-style：normal；
italic	浏览器会显示斜体的字体样式

平时很少给文字加斜体，反而要给斜体标签(em，i)改为不倾斜字体

5.字体复合属性

字体属性可以把以上文字样式综合来写

顺序不能更换，不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则font属性将不起作用

6.字体属性总结

属性	表示	注意点
font-size	字号	我们通常用的单位是px像素，一定要跟上单位
font-family	字体	实际工作中按照团体约定来写字体
font-weight	字体粗细	记住加粗是700或者bold 不加粗是normal或400 记住数字不要跟单位
font-style	字体样式	记住倾斜是italic 不倾斜是normal 工作中常用normal
font	字体连写	注意顺序，字号 字体必须出现

CSS文本属性

CSS Text(文本)属性可以定义文本的外观，颜色、对齐文本、装饰文本、文本缩进、行间距

1.文本颜色

color颜色

表示	属性值
预定义的颜色值	red，green，pink
十六进制	#FF00000,#FF6600,#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%）

2.对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式

属性值	解释
left	左对齐
right	右对齐
center	居中对齐

3.装饰文本

text-decoration属性规定添加到文本的修饰

div {
	text-dercoration:center;
}

属性值	描述
none	默认，没有装饰线
underline	下划线，链接a自带下划线
overline	上划线
line-through	删除线

4.文本缩进

text-indent属性用来指定文本的第一行缩进，通常是将段落的首行缩进

div {
	text-indent:10px;
}

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小

5.行间距

ling-height属性用于设置行间的距离（行高），可以控制文字行与行之间的距离

p {
	line-height:26px;
}

CSS的引入方式

1.CSS三种样式表

• 行内样式表（行内式）
• 内部样式表（嵌入式）
• 外部样式表（链接式）

2.内部演示表

写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个< style>标签中

控制范围，整个html页面，并没有和样式完全分离

3.行内样式表

行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式，适合于修简单样式

标签内部写样式，控制当前标签设置样式

4.外部样式表

实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用

1.新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中

2.在HTML页面中，使用< link>标签引入这个文件

属性	作用
rel	定义当前文档于被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径

Emmet语法

1.快速生成HTML结构语法

2.快速生成CSS样式语法

3.快速格式化代码

标签：样式,标签,语法,样式表,文本属性,选择器,CSS,属性
来源： https://blog.csdn.net/weixin_46623496/article/details/119107031

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。