CSS( Cascading Style Sheets )---- 元素的显示方式
层叠样式表
层叠:相同的样式的不同值作用到同一元素的时候,会有样式被覆盖.
样式生效会有先后重要的顺序.根据样式优先级,如果优先级一样,后写会覆盖先写的.
样式表:元素视觉表现的集合.例如我们看到的宽高背景颜色等等
样式是依附HTML而存在的,如果没有标签,样式将毫无意义.
最小影响法则
当我们创建一个标签之后,高度为0px,无色无味透明.
怎么想?你不可能创建一个元素盒子默认宽高很大把整个页面盖住了,这样对于页面的布局和排版就会变得非常的麻烦.
像素px
任何的显示设备,无论是我们的手机还是显示器.都是由一个个发光小圆格所显示.
并且这个发光原件要能显示这个世界上所有的颜色的话,这个发光原件要有三种颜色,即我们光学三原色红绿蓝.这三个颜色组合在一起,可以表现一个点的颜色,一个点就是一个像素大小.
扫描二维码关注公众号，回复： 10391888 查看本文章
1920✖1080的,这两个数字就代表横向1920个像素单位,纵向1080个像素单位.
像素越多显示自然就越精细.
三种引入方式
行内样式
行内样式少用点(结构和样式未分离,会影响到代码结构的观察和维护).
一行代码可能会有二三十条样式,这样互相嵌套在一起就完全看不清元素的层级结构了
但是行内不是完全不可以使用,在我们以后框架用的也比较多.而是我们大家在学习样式的时候尽量写到外部去.
<div style="width: 500px; height: 500px; background-color:pink"></div>
/*现在我们设置style属性名,里面是我们的属性值.
里面样式代码的设置格式为：样式名称:样式值.
能看到这个盒子为粉色,我们测量下我们宽高一样是500px.
我们还可以去写上一些别的颜色如black,white,green,blue.
我推荐大家第二种写法,editus上的颜色器,这里有很多颜色.变成了#带六位数字,
这个颜色的奥秘我们后面讲背景的时候会跟大家细说.
*/
现在我们想宽度写小一点,高度写高点
<div style="width: 50px; height: 500px; background-color:red"></div>
/*此时一个很瘦的长条形盒子就出现了
很平的盒子怎么去写,是不是只需把我们的宽度改大,高度改小.
*/
内联样式
小型项目或者写一些demo小案例的时候使用内联样式,就像是将样式做成可插拔式.哪个元素想用就去取它.
style是样式标签,必须是写在head里面,写了style就相当于引入另一套的语法规范.
任何html标签的写法都不能在style标签中去使用.
<style type="text/css">
div{
width:200px;
height:200px;
background-color:lightgreen;
}
<div></div>
</style>
外联样式
外联样式将css样式从html文件里面抽离出来,用单独的文件存储.
保证了结构和样式的分离,让代码各司其职.
(1)引入式 link
(2)导入式 @import 必须写在行首 了解一下
@import url("./css/2.css");
大型项目开发时使用外联样式 大型项目上线时会变为内联样式.
命名
命名是建立样式与标签的桥梁,
我们设置的css样式要怎么去选中元素.通过什么方式选中元素并设置样式呢?
id命名
唯一性(页面只有你有这个名字,不能出现重复),主要用于js的元素控制.
简单来说,我们今后学习javascript要对元素进行选中控制,
但是如果选错元素就糟糕了,我们在这里用id命名就会保证其唯一性,绝对不会重复.
如果在以后团队协作开发时,我们要去做网站,我们分到了不同的区域,a做这个,b这个.这些区域就应该按照不同的id去进行命名,防止分类的时候出现相互干扰的情况,
所以id命名主要用于大结构框架上. 用#引入
<div id="zhangsan"></div>
class(类名命名)
可以有多个,只是一个分类,只要具有相似的属性的物体都会分到同一个类中.主要用于元素样式的设置.
<div class="zhangsan"></div>
<span class="zhangsan"></span>
3.通配符选择器 选中所有标签
(比较多的作用消除默认样式)
4.元素(标签选择器)
直接写标签名字
缺点 指向不明确 容易造成样式污染
命名规范
命名规范
1.必须以字母 数学 连字符- 下划线_组成
2.以字母开头 全部都是小写,不要单个字母
3.不允许出现带有广告的单词 :ad/adver/advertsing,游览器可能有装一个插件屏蔽广告,它就会将你这个区域识别为广告,而且爬虫识别也有问题.
4.禁止驼峰命名 className
5.不准以数字开头或者结尾
6.取名要见名知意
#zhangsan{
width: 100px;
height: 100px;
background-color: pink;
font-size:20px;
color:green;/*需要掌握的*/
}
.zhangsan{
width: 300px;
height: 300px;
background-color: green;
}
<div id="zhangsan">我要忘了你的样子</div>
<div class="zhangsan"></div>
<div class="zhangsan"></div>
<div class="zhangsan"></div>
class的应用
现在我们有一个需求,五个盒子,前两个为红色,后三个为绿色.前三个为宽高100px,后两个为宽高150px;
现在有三种不同的盒子,1.宽高100红色 2.宽高100绿色 3,宽高150绿色
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
}
.box3{
width: 150px;
height: 150px;
background-color: green;
}
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box2">3</div>
<div class="box3">4</div>
<div class="box3">5</div>
/*这样的写法确实能实现我们效果.但是这种命名方式肯定不是特别优秀的方式.
我们多出一个盒子就多出一个命名,box1,box3就没有什么意思.我们class是描述相似物体的.
这里的宽高颜色是不是可以进行分类,宽高100,宽高150,非常相似但有一些不同.
我们这里就不需要用到box1,box2,box3没有任何理由和含义的样式了*/
.w100{
width: 100px;
height: 100px;
}
.w150{
width: 150px;
height: 150px;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
<div class="w100 red">1</div>
<div class="w100 red">2</div>
<div class="w100 green">3</div>
<div class="w150 green">4</div>
<div class="w150 green">5</div>
/*现在我们可以直接通过观察元素类名来直观获取到盒子的特性.
后面即使我们再创建一个盒子依然可以使用这些特性.这些你可以叫做工具类.
这个在我们后期写项目的时候可以帮助我们省很多代码.
*/
div.w100{
width:100px;
height:100px;
background-color:red;
/*这样写不会报错.
w100: 所有类名叫做w100的盒子
div.w100: 所有类名叫做w100的div盒子
*/
}
<div class="w100 red">1</div>
<p class="w100">2</p>
.w100.red{
width:100px;
height:100px;
background-color:red;
}
<div class="w100 red">1</div>
<p class="w100">2</p>
/*此时只会选中我们的div,选中的是所有类名有w100并且有red的盒子*/
关系选择器
就是根据与其他元素的关系选择元素的选择器
主要是为了减少命名
1.后代元素选择器 儿子 孙子 曾孙 都能被选中 写在这个元素开始和结束标签里面的都是后代
空格 表示
2.子元素选择 选中儿子
>表示
3.相邻兄弟选择器(亲弟弟)
加号表示
4.通用兄弟选择器(亲弟弟) 找到他所有的弟弟
~表示
样式优先级
越具体越高
id>class>元素>*
比权重计算
先比较层级 后比较系数
权重(层级和系数)一样 后写的生效
