1.双击打开HBuilderX工具,创建一个新的HTML5静态页面,如下图zd所示:
2.在body标签元素中插入多个div标签,并用div将它们嵌套在div中,如下图所示:
3.在标题标签下面添加一个样式,设置全局版本的样式,并使用*符号,如下图所示:
4.保存代码并打开浏览器查看页面效果。可以在页面上找到背景颜色,如下图所示:
5.使用body标签选择器设置宽度、字体属性、字体大小等属性,如下图所示:
6.最后,使用body标签内部的div选择器来设置div标签样式,并添加边框和内外边的权重距离,如下图所示:
属性:通过属性的复杂叠加才能做出漂亮的网页。选择器:通过选择器找到对应的标签设置样式
标签选择器:就是用标签名来当选择器
1>所有的标签都能做选择器,例如:div、p、 ul、 li、 a、 span、body等等
2>不管这个标签藏的多深,都能够被选择上。
3>选择的整个界面所有的标签,而不是某个,是共性而不是特性
比如说火狐浏览器中的 li 里面所有的 a 标签去掉下划线
# 表示选择 id 选择器
1>任何标签都可以有 id ,命名方式要以字母开头,区分大小写
2>同一页面内 id 不可重复,即使是不一样的标签,也不允许相同的 id
. 表示类选择器 与 id 选择器类似,但是类选择器可以重复,比如说很多标签都有 aa 这个类
css里面用 . 来表示类
同一标签,可能同时属于多个类,用空格隔开.说明 div 同时属于 bb 和 cc 类
<div class = @"bb cc">我是bbcc</div>
错误方式:
<div class = @"bb" class="cc">我是bbcc</div>
思路:提供公共类,再根据相应的类名,去设置相应的样式。
在根据每个标签,去选取自己想要的类。