微信版网站开发,泉州高端网站建设,婚纱摄影类网站,山西众邦建设集团网站注意#xff08;本文一切代码一律是在vscode中书写#xff09;
1、书写位置
1、行内样式
//标签名 style样式声明
p stylecolor: red;666/p
2、内嵌样式
1、style标签 里面写css代码 css与html之间分离
2、css属性:值…注意本文一切代码一律是在vscode中书写
1、书写位置
1、行内样式
//标签名 style样式声明
p stylecolor: red;666/p
2、内嵌样式
1、style标签 里面写css代码 css与html之间分离
2、css属性:值控制书写显示的效果 stylep{color: red;}/style
3、外联样式表
新建css文件 通过link引用 link relstylesheet href1.css 解释rel 引入文件资源类型 href 引入资源的路径
2、css选择器
1、标签选择器
通过具体的标签名称来匹配文档内所有同名的标签 stylep{color: red;}/style 2、类选择器
根据标签class属性找到具体的html标签 类选择器的定义需要用到一个英文的句号. 后面跟着class属性的值 命名规范 1. 类名应该反映元素的用途或内容而不仅仅是样式。这有助于提高代码的可读性。 2. 推荐使用连字符而不是驼峰命名法来分隔单词因为连字符在HTML和CSS中更为普遍。 3. 类名不应以数字开头。 一个标签可以同时有多个类名类名之间以空格隔开。
使用场景将一些标签相同的样式放在一个类里面从而节省css代码的书写
css.text-bule{color: aqua;font-size: 30px;}.text-box{font-size: 30px;/* 字体大小 */}
div classtext-bule text-box666/div 3、ID选择器
1、用来找到HTML文档中具有指定ID属性的标签
2、ID选择器的定义需要用到井号#后面紧跟ID属性的值。
注
1、 ID选择器的使用方式和类选择器的使用方式类似但ID选择器的主要作用是结合js用于确定页面上的唯一元素。
2、单个标签不允许拥有多个id名同页面中不存出现重复的id名(id重名会影响js代码获取标签)。
#text-red{color: red;
}
div idtext-redred/div 4、通配符选择器
通配符选择器用星号*表示不匹配某个特定的HTML元素而是匹配 HTML文档中的每个元素。
!-- 我们通常使用通用选择器来清除HTML元素中默认的内外边距。 --*{color: red;}p这是p/p
a href这是a/a
div这是div/div 5、组合选择器
组合选择器: 两个或两个以上的选择器配合使用
1、后代选择器
- 结构选择器1 选择器2 {css属性名:属性值;} - 在选择器1所找到标签的后代后代包括儿子、孙子、重孙子……中找到满足选择器2的标签设置样式
cssdiv p{color: red;/* 找到div里面的p标签 */}2、子代选择器
- 结构选择器1 选择器2 {css属性名:属性值;} - 在选择器1所找到标签的子代子代只包括儿子中找到满足选择器2的标签设置样式
cssdiv p{color: red;}
3、相邻兄弟选择器
- 相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素这两个元素拥有同一个父级元素并且不存在嵌套关系。
- 相邻兄弟选择器的定义需要用到加号加号两边为相邻的两个元素选择器会!!!匹配加号后面的元素!!! styleh1 p{color: red;}style
4、通用兄弟选择器
- 通用兄弟选择器同样会匹配同一父级元素下的兄弟元素但兄弟元素之间无需紧邻。
- 定义通用兄弟选择器需要用到波浪号~波浪号两边为同一父级元素下的两个元素选择器会匹配波浪号后面的元素
stylep ~ a{color: aqua;}style
5、分组选择器
- 结构选择器1,选择器2 {css属性名:属性值;} - 同时选择多组标签设置相同的样式 - 通过 **,** 分隔 - 通常一行写一个提高代码的可读性
默认样式是指浏览器为HTML元素自动应用的预定义样式以确保页面在没有显式样式表的情况下具有基本的可读性和结构。不同的浏览器对于默认样式的实现可能存在差异这可能导致在不同浏览器中显示的效果不同。为了确保页面的一致性通常会使用CSS样式表来覆盖或重置默认样式并以一致的方式定义页面的外观和布局。[初始化样式文件 ](https://meyerweb.com/eric/tools/css/reset/)。
css
div,
p{color: red;}6、交集选择器
- 结构选择器1选择器2{css属性名:属性值;} - 找到页面中**既**能被选择器1选中**又**能被选择器2选中的标签设置样式 - 交集选择器中的选择器之间是紧挨着的没有东西分隔
stylep.box{color: red;}/style
7、层叠性与优先级
1、层叠性所谓的层叠即叠加的意思表示样式可以一层一层的层叠覆盖。多个选择器给同一个标签设置不同的样式会共同作用在标签上。 2、优先级如果同一个标签被多个选择器赋予了相同的属性且值不一样时会按照选择器的优先级来决定以哪个样式为准比如 - !important 行内 id选择器 类选择器 标签 继承 组合选择器权重叠加 两个选择器权重一样 以最后出现的为准
