WEB前端学习日志Day4

今日总结：通过一天的学习了解了样式表的权重，css的层叠性，css的选择符，划分网页上下布局，主要对css的选择符进行深入理解和代码实现。

样式表的权重

样式表的权重关系：
1. 内联样式表的权重最大！
2. 内部和外部样式的权重，和书写的前后顺序有关！
（放在后面的会把放在前面的样式覆盖掉,覆盖的只是相同属性的样式，不同属性的样式会继续执行。）
举例：
在学校你的班主任对你说：明天你值日。你所在小组的组长说：明天你不需要值日。在两者之间老师的权重大，座椅要听从老师的意见。

关键字：

!important -> 当前声明具有最高权重！

css的层叠性

通过例子解释层叠性
题干：
html结构 < div style=“width:300px;”>
head里面的css的部署：
< head>
< link rel=“stylesheet” href="./css/style.css">
< style>
div {
background:red;
width:1000px;
}
< /style>
< /head>
提示：style.css里面的样式如下：
div {
height :400px;
width :500px!important;
border :10px solid yellow;
}

问题：写出浏览器加载div时候的样式。width:500px!important;background:red;height:400px;border:10px solid yellow;

css选择符

共计7种选择符，其语法如下：
选择符：选择符就是给标签起名字。

一：类型选择符（标签选择符）所有的html标签可以直接当作选择符进行应用。div\p\em\i\b\strong.............特点：能选中当前结构里面全部同名标签。应用：想统一某一个标签样式的时候或者是清除某个标签默认样式的时候。二：id选择符    ->  相当于人的身份证号语法：起名字：        <标签 id="名称">用名字写样式：   #名称{ 属性:属性值 }特点：唯一性！在同一个页面里面，一个id名只能用一次。应用：来划分网页外围结构三: 类选择符(class选择符)语法:其名称:         <标签 class="名称1 名称2 名称3 名称4...">用类名写样式     .名称{属性:属性值;}特点:a:一个元素可以有多个类名,类名可以重复出现b:可以制定一类样式.四: 群组选择符语法:以逗号分隔的方式,把多个选择器组成一组,给整组添加样式.选择符1,选择符2,选择符3,选择符4{ 属性:属性值; }eg :     #box,.con,h3,#wrap{ width:300px; }五: 包含选择符(子代选择器\后代选择符)    ( 通过父元素找子元素 )语法:父元素 子元素{ 属性:属性值; }六: 伪类选择器:a:link {color: red;}                    /* 未访问的链接状态 */a:visited {color: green;}				/* 已访问的链接状态 */a:hover {color: blue;}                  /* 鼠标滑过链接状态 */a:active {color: yellow;}               /* 鼠标按下去时的状态 */七：通配符*{  }* 选择页面中所有的元素！* {margin:0;    盒子外围间距清零padding:0;   盒子内部的距离清零}

用div划分网页布局

主要通过网页来练习如下图

代码实现：

css代码

最终得出如下图结果

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！