CSS层叠样式表

aigo-2021

于 2022-04-11 23:36:43 发布

阅读量511

点赞数 1

分类专栏： javaWeb 文章标签： html css

本文链接：https://blog.csdn.net/aigo_2021/article/details/124112207

版权

javaWeb 专栏收录该内容

33 篇文章 4 订阅

订阅专栏

CSS层叠样式表用于实现HTML元素的效果。样式可内嵌、内部或外部定义，影响范围不同。选择器包括元素选择器、类选择器、ID选择器、后代和直接子元素选择器。样式优先级：内嵌>内部>外部>浏览器默认。示例展示了如何通过CSS定义按钮样式并应用到不同类型的按钮。

摘要由CSDN通过智能技术生成

CSS层叠样式表

是一种实现样式的语言，和html组合使用。样式其实可以理解为效果

CSS的语法

样式名: 值 ;

<input type="button" value="确定" style="color:#ff0000;font-size:20px;">

CSS代码的位置

1. 内嵌样式，写在每个元素的style属性中：样式不能得到重用

2. 内部样式，写在html文件中的head标记的style标记中：在当前的html中使用定义的样式，但在别的html中不能使用这个定义的样式

3. 外部样式，写在css文件中：在html文件中导入css文件的内容，在所有的html中使用定义的样式。

<!doctype html>
<html lang="en">
 <head>
	<link href="mycss.css" rel="stylesheet"/>
 </head>
 <body>
	<input type="button" value="取消" id="cancelBtn">
	<input type="button" value="删除" id="removeBtn">
 </body>
</html>

mycss.css

#cancelBtn,#removeBtn{
	color:#ff0000;
	font-size:20px;
}

定义CSS样式的选择器

选择器规定了如何引用定义的样式

1. 元素选择器，定义在元素选择器中的样式，所有的相关元素都使用这个样式。

input{
    color:#ff0000;
    font-size:20px;
}

2. 类选择器，定义一类元素的样式，类别是通过元素属性指定的。

<head>
    <style>
        .btn1{
            color:#ff0000;
            font-size:20px;
        }
        .btn2{
            color:#ff0000;
            font-size:30px;
        }
        .btn3{
            color:#3399ff;
            font-size:20px
        }
    </style>
</head>
<body>
    <input type="button" value="确定" class="btn1">
    <input type="button" value="取消" class="btn1" >
    <input type="button" value="删除" class="btn2">
    <input type="button" value="修改" class="btn3">
</body>

3. id选择器：指定的id应用定义的样式

#modifyBtn{
    color:#3399ff;
    font-size:20px
}

4. 后代选择器：元素的后代应用定义的样式

table input{
    color:#ff0000;
    font-size:20px;
}

5. 直接子元素：

table > input{
    color:#ff0000;
    font-size:20px;
}

6. 联合选择器： selector，selector

#cancelBtn,#removeBtn{
    color:#ff0000;
    font-size:20px;
}

样式范围的优先级：内嵌样式 > 内部样式 > 外部样式 > 浏览器默认样式

aigo-2021

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录