首页 > 其他分享> > CSS基础（语法规范、基础选择器、字体文本属性、引入方式、Emmet语法）-723

CSS基础（语法规范、基础选择器、字体文本属性、引入方式、Emmet语法）-723

2021-07-26 13:01:16 作者：互联网

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属性来定义文本的字体系列
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8PIhJocY-1627273863662)(F:\learn_note\723\image-20210723140108803.png)]$

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