样式表可以有三种书写方式,分别分为
内嵌式样式表是在html里面嵌套一个style标签,将css语句都写在style标签里面
<style>
css语句
</style>
单独创建一个后缀名为.css的文件,在html文件里面通过link标签引入css文件
<link rel="stylesheet" href="css文件的地址" />
将样式直接写在标签本身上,以属性的形式存在
<div style="color:green; font-size:20px;"></div>
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内式样式表 | 书写方便,权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签(少) |
内嵌式样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面(中) |
外链式样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,强烈推荐 | 控制整个站点(多) |
代表标签:div,p,ol,li,ul,dt,dd,dl,header,footer,aside,nav,article,section
display:block;
代表标签:a,span,b,u,s,i,strong,ins,del,em
display:inline
代表标签:input,img
display:inline-block
注:一般实际工作来说标签不需要进行转换,因为大多数情况下都可以选择对应的标签来实现需求 行内块较为特殊!!
既又原则
例如:p.box {} 既是p标签 又有box类名
将多个选择器合并在一起
例如: div,p,h1 {}
空格前面的元素和后面的元素必须是嵌套关系
例如:.father .houdai {}
> 前面的元素和后面的元素必须是父子关系
例如:.father > .son {}
<div class="nav"> <!-- 主导航栏 -->
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司产品</a></li>
<li>
<a href="#">联系我们</a>
<ul>
<li><a href="#">公司邮箱</a></li>
<li><a href="#">公司电话</a></li>
</ul>
</li>
</ul>
</div>
<div class="sitenav"> <!-- 侧导航栏 -->
<div class="site-l">左侧侧导航栏</div>
<div class="site-r"><a href="#">登录</a></div>
</div>
在不修改以上代码的前提下,完成以下任务:
background-color: red;
颜色可以设置成十六进制 或者 rgb 或者 rgba
background-image: url(图片路径);
background-repeat: 背景平铺;
1.repeat 平铺 默认的
2.no-repeat 不平铺
3.repeat-x 水平平铺
4.repeat-y 垂直平铺
background-attachment: 背景是否滚动;
1.scroll 默认值 图片跟随盒子一起滚动
2.fixed 图片不跟随盒子一起滚动
background-position: 背景位置;
1.方位名词 right top left center bottom 书写的顺序不论
2.像素 如果是像素 那么默认在以“当前盒子”的左上角为0 0原点 构建一个坐标系 第一值是X轴的位置 第二个值是Y轴的位置 交互的点就是图片开始显示的起始位置
多说一嘴:
1、程序里面的坐标系X轴水平向右 Y轴垂直向下
2、注意顺序
3.百分比 百分比参照的自身盒子的宽高: 最终的位置是当前盒子自身的宽高的百分比 - 图片自身的宽高的百分比
4.还可以混写 混写是需要考虑顺序
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
如:background: #fff url() no-repeat scroll center center;
img不需要专门写宽高就能够显示在页面上
而背景图片默认是撑不开容器的 需要专门写宽高
一般产品插入图都推荐使用img 而一些小的icon 或者很少更新的图片 再或者超大的图片推荐使用背景图
而且背景图可以让内部的文字盖在上面,但是img不行(除非后期用定位)
后代元素会继承祖先元素的一些样式 跟文字相关属性可以继承 color font- line- text- 可以继承 块元素可以继承父级元素的宽度,高度不继承
<div class="father">
爸爸
<div class="son">
儿子
<div class="grandson">孙子</div>
</div>
</div>
后渲染的css样式会覆盖掉先渲染的css样式 (权重相同的情况下) 注意:层叠性真针对css的书写位置,类的调用位置先后会它没有影响
<style>
.box1 {
/* 最终绿色起效果 */
color: red;
color: green;
}
</style>
<div class="box"></div>
不同的选择器之间会有不同的优先级
继承 < 通配符 < 标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important
关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下:
specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
继承或者* 的贡献值 | 0,0,0,0 |
---|---|
每个元素(标签)贡献值为 | 0,0,0,1 |
每个类,伪类贡献值为 | 0,0,1,0 |
每个ID贡献值为 | 0,1,0,0 |
每个行内样式贡献值 | 1,0,0,0 |
每个!important贡献值 | 正无穷 |
权重是可以叠加的
比如的例子:
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p ------> 0,1,0,1