CSS整理

最新推荐文章于 2024-11-12 22:27:10 发布

m0_68450465

最新推荐文章于 2024-11-12 22:27:10 发布

阅读量48

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_68450465/article/details/131602606

版权

字体属性 font-family:
字体大小：font-size:
字体粗细：font—weight: normal 默认值 bold 定义粗体 100～700 400等同于normal 700等同于bold，数字后面不需要单位
文字样式：font-style ： normal 默认值，italic 浏览器显示斜体
文本颜色：font-color ：
对齐文本 text-align： center居中 left左对齐 right 右对齐
装饰文本：text-decoration： overline 上划线 line-through删除线 underline 下划线
text-indent 用户指定第一行的缩进方式，通常将段落首段缩进
div{
text=indent:10px}
行间距
line-height 设置行间距
p{
line-height:26px}
CSS引入样式
1.行内样式表（行内式）是在元素标签内部的style属性中设置css样式，适合修改简单样式<div style-"color:red;font-size:12px";></div>
2.内部样式表（嵌入式）内部样式表是写html页面内部，将所有css代码抽取出来，单独放在style标签中，style通常放在文档<head>标签中
3.外部样式表（连接式）链接式：<link rel=" stylesheet" href="css/text/css" 如果式链接式先加载css文件后加载HTML文件导如式import
先加载html文件，后加载css文件
引入css样式text/css
优先级等级（就近原则）
行内样式表>内部样式表>外部样式表
CSS三大基本选择器
标签选择器使用html标签作为标签选择器得名称 <div>标签选择器</div> 标签选择器不遵循就近原则
基本语法格式：标签名{ 属性1：属性值1；属性2：属性值2；}
类选择器基本语法格式：.类名{ 属性1：属性值1；属性2：属性值2；
ID选择器 <div id ="second">ID选择器</div> 不能重复具有唯一性在style标签中需要加#second{ }
基本语法格式：#id名{ 属性1：属性值1；属性2：属性值2；}
ID>类>标签
css六大高级选择器
全局选择器 * { } 标签➕body+html 所有标签
并集选择器元素1，元素2 表示同时选择；
交集选择器必须有两个以上选择器组成，第一个必须是标签选择器，第二个必须是类选择器
只能交两个，第一个是选择器，第二个是class/id 必须同时满足
两者之间无空格，无，
层次选择器
后代选择器
在某个元素的后面；比如祖爷爷的“后代选择器”有爷爷、爸爸、你
子选择器 (>) 某个元素的下一级元素；比如爷爷的“子选择器”是爸爸
相邻兄弟选择器 (+) 同级向下相邻的一个元素；比如你有一个哥哥和一个弟弟，那么你的“相邻兄弟选择器”是你的弟弟
通用兄弟选择器 (~) 当前元素的向下的所有兄弟元素；你的“通用兄弟选择器”是你的弟弟妹妹们
h1~p h1后面的p全部选中
a~p a后面的p全部选中
属性选择器属性选择器可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性
模板：标签[属性]{}
p[id]{} 所有p标签内的id标签都统一更改，class也可以
- p[class=pp1]{} 只修改class=pp1的内容
语法格式：[标签名称] { 属性1：属性值1；属性2：属性值2；}
描述
[attribute] 用于选取带有指定属性的元素
[attribute=value] 用于选取带有指定属性和值的元素
[attribute~=value] 用于选取属性值中包含指定词汇的元素
[attributeI=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
[attribute^=value] 匹配属性值以指定值开头的每个元素
[attribute$=value] 匹配属性值以指定值结尾的每个元素
[attribute*=value] 匹配属性值中包含指定值的每个元素
结构伪类选择器