青训营笔记CSS1

95 阅读1分钟

CSS 全称Cascading Style Sheets

一种样式表语言,为html标签修饰定义外观,分工不同

CSS与HTML关系

html是网页的内容

css是网页的样式(结构)

行内样式表

只能对所在标签进行修饰,优先级最高,相对用的少

微博

内嵌样式表

<style>
    .p1{
        color: aqua;
        font-size: 25px;
        font-family: 宋体;
        background-color: red;
    }
 
/* 图片自带4像素的样式 ,可清除样式*/
	img{
		display: block;
	}
<style>

外部样式表

把样式表提取到一个外部的css文件中

在css文件中写法与内嵌样式表中大致相同,但不需要写style标签

使用调用css文件中的样式表

注释

css中的注释为/* 注释的内容 */

选择器

标签选择器

a{
    color: red;
}
p{
    color: lavenderblush;
}

类选择器

<style>
    .p1{
        color: blue;
    }
</style>
<body>
    <a href="" class="p1">cxk</a>
</body>

通配选择器

匹配所有的标签,优先级最低


*{
    font-size: 20px;
}

id选择器

<style>
    #aid{
        color: chocolate;
    }
</style>
<body>
    <a href="" id="aid">蔡徐坤</a>
</body>

选择器优先级

匹配标签越多,优先级越低,重叠选中标签时,使用优先级高的样式

但低优先级与高优先级没有重叠的样式,也会添加低优先级的样式

由高到低:行内样式表->id选择器->类选择器->标签选择器->通配选择器

后代选择器

对某个父标签的下级标签修饰

如列表

<style>
    .u1 li{
	}
</style>
<body>
    <ul class="u1">
        <li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
		<li>列表项4</li>
	</ul>
</body>