CSS选择符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box {
            width: 400px;
            height: 300px;
            background: red;
        }
        
        .con {
            border: 20px solid purple;
        } */
        
        .box1 {
            width: 300px;
            height: 50px;
            background: red;
        }
        
        .box2 {
            width: 900px;
            height: 100px;
            background: orange;
        }
        
        .box3 {
            width: 1000px;
            height: 200px;
            background: palegreen;
        }
        
        .box4 {
            width: 500px;
            height: 300px;
            background: peachpuff;
        }
        /* 制定一类样式（准备一套边框的技能包） */
        
        .add_border {
            border: 10px solid black;
        }
    </style>
</head>

<body>


    <div id="header"></div>
    <div id="nav"></div>
    <div id="banner"></div>
    <div id="news"></div>
    <div id="case"></div>
    <div id="links"></div>
    <div id="footer"></div>
    <div class="box con"></div>
    <div class="box"></div>


    <div class="box1 add_border"></div>
    <div class="box2"></div>
    <div class="box3 add_border"></div>
    <div class="box4"></div>
</body>

</html>

<!--

css语法：

选择符{

属性：属性值;

}

选择符：选择的是html标签，就是标签的一个名称。

1：

id选择符：（相当于人的身份证号）

语法：

起名字：<标签 id="名称"></标签>

用名字写样式：#id名称{ css样式 }

特点：

a：id是唯一的：在同一个页面只能出现一次。

b: id是用来划分网页外围结构

class选择符:

语法：

起名字： <标签 class="名称"></标签>

用class写样式 .class名称{ css样式 }

特点：

a：class名可以重复出现

b：一个标签可以拥有多个类名

c：更适合定义一类样式

3：

类型选择符/标签选择符

所有的html标签可以直接当作选择符进行应用。

特点：

a：选择当前页面中的所有同类标签。

b：统一某个标签样式的时候

c：想改变一个元素默认样式的时候

4：

包含选择符：（根据父元素查找子元素）

语法：

父元素选择符子元素选择符（给子元素写样式）

群组选择符：

选择符1，选择符2，选择符3，选择符4{

给当前一组添加样式

}

.box,#wrap,p,h2{

width:1000px;

}

6：

伪类选择器：

a:link {color:red;} /* 未访问的链接状态 */

a:visited {color:green;} /* 已访问的链接状态 */

a:hover {color:blue;} /* 鼠标滑过链接状态 */

a:active {color:yellow;} /* 鼠标按下去时的状态 */

四个伪类常用状态；

color:red;

}

a:hover{

/*鼠标滑过之后的状态*/

color:blue;

}

滑过父元素更改子元素样式

.box:hover h2{

background:blue;

}

</div>

注： :hover 能改变自身样式、也能改变子元素样式

有一些标签：默认产生外边距或者是内填充，默认产生的间距需要清除

清除外边距：marginL:0;

清除内填充：padding:0;

因为暂时不能确定哪些标签有间距、填充，我们把所有标签的margin/padding清除

通配符：

//选择所有标签

}

写css样式的时候，在开头先写上

margin:0;

padding:0;

}

*{ margin:0;padding:0;} 遗留一个问题：

*选择所有，把没有margin和padding的元素都清除了一遍，影响性能

-->

<!--

起名规范：

a：尽量使用小写英文字母开头

b；不能使用汉字命名

c：可以连接数字、字母、下划线、连接符

d：名字尽量简短、并且反应板块的用途或是板块的信息或是反应板块的结构

e：命名不能使用关键字

所有的标签和属性都属于关键字

起名方法：

1：驼峰式命名法：

newsLeft newsRight newsCenter ->小驼峰

NewsLeft NewsRight NewsCenter ->大驼峰

2：连字符命名法

news-left news-right

3：下划线命名法

news_left news_right news_cneter

-->

<!--

网页的版心区域；网页真正显示内容的区域

最外围板块不用设置宽度：自适应

-->

posted on 2021-01-04 14:46 sunandwang 阅读(194) 评论(0) 收藏举报