CSS第一天总结

时间:2024-01-14 12:11:56

CSS是层叠样式表,其作用在我看来就是统一一个或多个元素或者ID、class等的属性,CSS可以定义的属性非常多,一个好看的网页离不开CSS的修饰。

CSS简而言之就是三个部分:选择符、属性、属性值。

每个浏览器的CSS都在遵守标准的同时自主添加了各自的私有标准,为了更好的兼容性需要添加前缀:

-webkit  chrome和safari

-moz     firefox

-ms      IE

-o        opera

引入CSS的方法有三种:

1.行内引用

<a style="text-decoration:none;color:black"

*简单的页面编写或教学时常用

2.页内引用

<style type="text/css">
a{
text-decoration: none;color: black;
}
</style>

*页内引用放在头部有利于网页性能上的提高

3.外部引用

<link rel="stylesheet" type="text/css" href="url">

*具有一定规模的网站都使用外部引用,有利于网站的维护

**3种方式冲突时的优先级:行内引用>页内引用>外部引用(就近原则)

CSS注释格式:/*注释内容*/

-------------------------------------------------------------------------------------------------------------------------------------------------------------

CSS选择符

1.通配选择符

选择所有元素,用于设置页面内所有元素的属性,如页面字体样式,字体颜色等

*{
font-family: "微软雅黑";
color: #bebebe;
}

2.元素选择符

直接选择指定元素进行属性设置,如对页面所有a元素解除下划线且颜色改为黑色:

a{
text-decoration: none;
color: black;
}

对页面所有p元素设置字体大小

p{font-size: 30px;}

3.群组选择符

需要给多个元素同时设置同一属性时使用,各元素之前用逗号分隔,如设置a和p元素字体大小为30像素:

a,p{font-size: 30px;}

设置h1,h2元素颜色为红色:

h1,h2{
color: red;
}

4.包含选择符

当不想选择页面全部的某个属性而只想选择被另外一个属性包含的部分时使用,可以选择元素包含的某一元素,格式为a b{} ab之间是用空格隔开

例如,div包含着两个p元素,而div外有也一个p元素

  <p>test</p>
<div>
<p>test</p>
<p>test</p>
</div>

当我们选择div里面的p元素时,将P元素字体设置为红色

div p{color:red}

预览效果会发现,第一个test为默认的黑色,只有后面两个test字体颜色变为红色

 

**

使用页内引用时,不要忘记把css代码放入<style></style>里面

使用外部引用时,css文件不需要任何html的标签,只需要选择符、属性和属性值,例 a{color:red}