CSS基础（1）

发布日期: 2022-10-09

更新日期: 2023-03-03

文章字数: 1.5k

阅读时长: 6 分

阅读次数:

每日一记

CSS

1.含义:如何修饰网页信息的显示样式
2.语法
1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值。
2）属性必须放在花括号中，属性与属性值用冒号连接。
3）每条声明用分号结束。
4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开。
5）在书写样式过程中，空格、换行等

内部样式表

第一
<style>
    h1{color:red;}
</style>
放head和body都可以

第二
<body>
    <h1 style="color:red;" >内容</h1>
</body>

外部样式表

<link rel="stylesheet" type="text/css" herf="css文件所在的地址">       #注意是rel
<style>
    @import url(css文件所在的地址);                                    #注意分号
<style>
两种，最好放head标签里

扩展知识点

link和import之间的区别？
①差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
②差别2：加载顺序的差别：link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载 CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
③差别3：兼容性的差别：@import老的浏览器不支持，而link标签无此问题。
样式表优先级
原则:就近原则————!important（放在属性值后）>行内>内部>外部 #注意感叹号

标签选择器

1.class类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .类名1{background-color:blue;}                              #就近原则，离开头最近的style为准
        .类名2{background-color:red;}
    </style>
</head>
<body>
    <div class="类名1 类名2">222</div>                              #空格可以放置多个类名
</body>
</html>

2.id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{background-color:yellow;}
        #box3{background-color:blue;}
        #box2{background-color:red;}
    </style>
</head>
<body>
    <div>1111111111</div>
    <div id="box1">2222222222</div>
    <div id="box2">3333333333</div>
</body>
</html>

语法：#id名{属性：属性值;} 
A）使用id选择符时，应该为每个元素定义一个id属性 如：<divid="box"></div> 
B）id选择符的语法格式是“#”加上自定义的id名 如：#box{width:300px;height:300px;} 
C）起名时要取英文名，不能用关键字：（所有的标记和属性都是关键字） 如：head标记 
D）一个id名称只能对应文档中一个具体的元素对象,多个时就不显示样式。（唯一性）

3.通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;      #外边距为0
            padding:0;     #内边距为0
        }
    </style>
</head>
<body>
    <div>1111111111</div>
    <div id="box1">2222222222</div>
    <div id="box2">3333333333</div>
</body>
</html>
语法：*{属性:属性值;} 
说明：通配选择符的写法是“*”，其含义就是所有元素。 
*{margin:0;padding:0;}代表清除所有元素的默认边距值和填充值

4.群组与后代选择器

    <style>
        标签们或者class内的类名们{background-color:yellow}      #标签们之间要加逗号，而且类名前要加.
    </style>

若之间不加逗号则是后代选择器，仅更改空格代表的后代
#从右到左地选择

5.伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link{color:yellow;}
        a:visited{color:red;}
        a:hover{color:orange;}
        a:active{color:blue;}
    </style>
</head>
<body>
    <a herf="超链接">
        内容
    </a>
</body>
</html>

语法： 
a：link{属性：属性值;}超链接的初始状态 
a.visited(属性：属性值;}超链接被访问后的状态 
a:hovert{属性：属性值;}鼠标悬停的状态 
a:active{属性：属性值;}超链接被激活时的状态
说明： 
A）顺序为： a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效 
B）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中； 例如：a{color:red;}a:hover{color:green;}表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样。

6.选择器的权重
!important>内联样式>包含选择符>id选择器>class选择器>类型（元素）选择器
有冲突时高权重覆盖低权重
相同权重就近原则（哪个先被定义）