CSS入门

LikY03321

已于 2022-12-08 16:32:45 修改

阅读量138

点赞数

文章标签： css 前端

于 2022-12-08 13:51:47 首次发布

本文链接：https://blog.csdn.net/LikY03321/article/details/128235191

版权

css是一种描述HTML文档样式的语言。css描述应该如何显示HTML元素。

css指的是层叠样式表，也称级联样式表 。美化HTML元素，可以对网页进行布局节省了工作，外部样式表存储在css文件中

css语法：css规则集由选择器和声明块组成:

选择器指向你需要设置样式的html元素。

声明块包含一条或多条用分号隔开的声明 {属性：值；属性：值}

<head>
	<style>
		选择器{
			属性名：属性值;
			属性名：属性值;
		}
	</style>
</head

<style>
    p{
属性：值；    
}
</style>
<body>
<p>这是一段文字</p>
</body>

根据元素id选择元素的id在页面是唯一的，不能已数字开头

id选择器高于元素选择器的优先级

<style>
    box{
属性：值；    
}
</style>
<body>
<div id="box">这是一段文字</div>
</body>

持有特定的class属性优先级大于元素选择器

<style>
    box{
属性：值；    
}
</style>
<body>
<p class="box">这是一段文字</p>
</body>

选择页面上所以html元素优先级最低

<style>
    *{
属性：值；    
}
</style>
<body>
<p>这是一段文字</p>
</body>

选取所有具有相同样式定义的HTML元素用逗号分隔

<style>
    div,p{
属性：值；    
}
</style>
<body>
<p>这是一段文字</p>
<div>这是一段文字</div>
</body>

后代选择器用于取某元素的后代元素高于分组选择器

 ol li {
            color: pink;
        }
<ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
    </ol>

只能选择作为某元素/一级子元素的元素（必须父子关系）

容器是有选择的段落标签不能放层元素标签

 div>p {
            color: pink;
        }
<div>
        <p>我是div的孩子</p>
    </div>

3、相邻兄弟选择器（以加号+分隔）

相邻兄弟选择器可以选择紧接在另一个元素后的元素，且二者有相同父元素

div+p {
            color: pink;
        }
<div></div>
<p>这是一段文字</p>

优先级大于相邻兄弟选择器

后续兄弟选择器选取指定元素后所有相邻兄弟元素

div~p {
            color: pink;
        }
<div></div>
<p>这是一段文字</p>
<p>这是一段文字</p>
<p>这是一段文字</p>

[attribute] 选择器用于选取带有指定属性的元素

a [target] {
  background-color: yellow;
}

<a href="" attributre="target"></a>

关注