前端CSS层叠样式表
-
层叠样式表
-
命名规则:
使用字母、数字或下划线和减号构成,不要以数字开头
-
格式:
选择器{属性:值;属性:值;属性:值;....}
其中选择器也叫选择符
-
CSS中注释
/* ... */
就是在HTML的标签中使用style属性来设置css样式 格式: <html标签 >被修饰的内容</html标签>
<p >在HTML中如何使用css样式</p>
特点:仅作用于本标签
1、html选择符(标签选择器)
就是把html标签作为选择符使用 如 p{....} 网页中所有p标签采用此样式
h2{....} 网页中所有h2标签采用此样式
2、class类选择符 (使用点.将自定义名(类名)来定义的选择符)(类选择器P)
定义: .类名{样式....} 匿名类
其他选择符名.类名{样式....} 使用:<html标签 class="类名">...</html标签>
.mc{color:blue;} /* 凡是class属性值为mc的都采用此样式 */
p .ps{color:green;} /只有p标签中class属性值为ps的才采用此样式/
注意:类选择符可以在网页中重复使用
3、Id选择符(ID选择器)
定义: #id名{样式.....} 使用:<html标签 id="id名">...</html标签>
注意:id选择符只在网页中使用一次
选择符的优先级:从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]
4、关联选择符(包含选择符)
格式: 选择符1 选择符2 选择符3 ...{样式....} 例如: table a{....} /*table标签里的a标签才采用此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/
6、*通配符(全局选择器)
说明:
通配符的写法是“*”,其含义就是所有元素。
用法:
常用来重置样式
*{padding:0; margin:0;}
a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同,只有鼠标划过变颜色。
伪类(Pseudo classes)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态
优先级:行内->css3选择器->id->class->html->html属性
1.关系选择器:
div>p 选择所有作为div元素的子元素p
div+p 选择紧贴在div元素之后p元素
div~p 选择div元素后面的所有兄弟元素p
2.
span:before{
content: '必须存在的属性';
display: block;
border:1px solid red;
}
span:after{
content: '必须存在的属性';
display: block;
border:1px solid red;
}
color 英文单词
{color:red;}
2、字体属性: font
font *font-size: 字体大小:20px,60%基于父对象的百分比取值
*font-family: 字体:宋体,Arial *font-weight: 字体加粗 :bold
3、文本属性:
*text-align: 文本的位置:left center right
*text-decoration: 字体画线:none无、underline下画线,line-through贯穿线
*line-height:行高 *color: 字体颜色
5、背景属性:background
*background-color: 背景颜色
*background-image: 背景图片
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库