devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS基础（语法规范、基础选择器、字体文本属性、引入方式、Emmet语法）_元素选择器 包含文本语法

作者：我家自动化 | 2024-05-06 10:45:19

赞

踩

元素选择器 包含文本语法

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;
}

  • 1
  • 2
  • 3
属性值描述
none默认，没有装饰线
underline下划线，链接a自带下划线
overline上划线
line-through删除线
4.文本缩进

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

div {
	text-indent:10px;
}

  • 1
  • 2
  • 3

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

5.行间距

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

p {
	line-height:26px;
}

  • 1
  • 2
  • 3

在这里插入图片描述

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.快速格式化代码

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/543814
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号