H5初学者 css样式表，选择符学习笔记

最新推荐文章于 2022-07-09 22:49:15 发布

zz_tiger

最新推荐文章于 2022-07-09 22:49:15 发布

阅读量263

点赞数

文章标签： html html5 css

本文链接：https://blog.csdn.net/weixin_46589032/article/details/104979754

版权

第一节：css回顾
1、css语法：
选择符{
属性：属性值;
}

2、 css样式表：
内部样式表、外部样式表、内联样式表

第二节:样式表的权重关系

1、样式表的权重关系：
内联样式表的权重最大！
内部和外部样式的权重，和书写的前后顺序有关！
（放在后面的会把放在前面的样式覆盖掉,覆盖的只是相同属性的样式，不同属性的样式会继续执行。）

2、关键字：
!important 当前声明具有最高权重！
语法： background:red!important;

第三节：css的层叠性

举例：
html结构 <div style="width:300px;"></div>
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;

第四节：分析多个div的区分

网页布局：
1、先做上下排版
2、再做左右排版
3、从外往里

第五节：css选择符

一，css语法：选择符{属性：属性值;}
选择符：选择符就是给标签起名字。

1、类型选择符（标签选择符）
所有的html标签可以直接当作选择符进行应用。
eg: div \ p \ em \ i \ b \ strong.............
特点：能选中当前结构里面全部同名标签。
应用：想统一某一个标签样式的时候或者是清除某个标签默认样式的时候。

2、id选择符相当于人的身份证号
语法：
起名字： <标签 id="名称"></标签>
用名字写样式： #名称{ 属性:属性值 }
特点：唯一性！在同一个页面里面，一个id名只能用一次。
应用：来划分网页外围结构
3、类选择符（class选择符）
语法：
   其名称：<标签 class=“名称1 名称2 名称3 名称4...”></标签>
    用类名写样式 .名称{属性：属性值；}
   特点：a：一个元素可以有多个类名，类名可以重复出现
   b:可以制定一类样式
4、群组选择符
   语法：以逗号分割的方式，把多个选择器组成一组，在整租添加样式
   选择符1，选择符2，选择符3，选择符4{属性：属性值；}
   eg: #box,.con,h3,#wrap{width：300px；}

5、包含选择符（子代选择符/后代选择符）（通过父元素找子元素）
语法：
父元素子元素{属性：属性值；}
6、伪类选择器：

   a:link{color：red;} 未访问的链接状态
    a:visited{color:green;} 已访问的链接状态
   a:hover{color:blue;} 鼠标滑过链接的状态
   a:active{clolr:yellow;} 鼠标按下去时的状态

7:通配符
   *{ }
   *选择页面中所有的元素！
   *{
       margin：0；盒子外围间距清零
       padding：0；盒子内部的距离清零
}

二、起名规范：
尽量小写字母开头。
数组、字母、下划线、连字符的组合。
不能使用关键字命名（所有的标签和属性都属于关键字）
命名尽量反应板块内容、或者反应结构(语义化)。
可以是拼音，但是不能出现汉字和特殊字符。

三、起名方法：
1:驼峰式命名法：
newsLeft newsRight newsCenter
2: 连字符命名法：
news-left news-right news-center
3: 下划线命名法：
news_left news_right news_center