5、css样式表特征
1.继承性
包含在内部的标签可以拥有外部标签的，但border、padding、margin不能继承
2.层叠性
可以定义多个样式，
3.优先级
总结：1.相同选择器，样式排序：行内样式>内部样式>外部样式（就近原则）
2.相同方式的样式表，选择器排序：ID》类》标签》通用（范围越小越好）
3.外部样式表的ID选择器>内部样式表的标签选择器
6.3 周四
6、合并选择器
合并选择器：精简重复的选择器格式
选择器1，选择器2，...{
属性1：属性1值；
属性2：属性值2；
。。。。
}
7、div+css布局
内容和显示分离，便于维护、布局方便。
8、css基础样式+css3选择器
Background-color：背景颜色
定义了北京图像和图片是，图像将覆盖颜色
取值：1.关键字 red。。。
2.16进制： #000000、#cccccc、#ff0000
3.rgb（0,0,0）范围（0-255）
4.rgba（0,0,0，.5）多了一个透明度，取值范围（0-1）
Background-image：背景图片
默认水平垂直方向平铺
Background-image：url（“路径”）
Background-repeat：背景图片是否重复
Background-repeat：repeat-x；
Background-repeat：no-repeat；
Background-repeat：repeat-y；
Background-size：背景图片大小。
Length：第一个值为宽，第二个为高，只设一个第二个默认auto
Percentage：以父元素（即上一层标签）百分比设置宽高
Cover：把北京图像扩展到足够大，可能会偶遇部分无法显示在区域内
Contain：把图像扩展到北京所能容最大尺寸，可能会有部分背景空余，Background-position：图片位置，定位，
第一个参数：水平方向，第二个：垂直方向；只写一个，第二个默认center
- 访问名词：left、right、pop、bottom、center
- 精确数字
- 混搭
Background-attachment：fixed；背景图片是否跟随其余内容的滚动而滚动
<style>
body{
background-attachment: fixed;
background-image: url("../image/5cd3e87d43e25.jpg");
}
</style>
Background：声明所有背景属性
<style>
div{
width: 300px; height: 300px ;
background: #ff90a6 url("../image/5cd3e87d43e25.jpg") no-repeat; background-size: 30px;
}
</style>
以空格分开不同设置。
9、字体属性
color 文本颜色
font-family：字体
font-size：字体大小
bold 加粗
bolder 更粗
light 细
lighter 更细
字体简写：
font 简写：font : font-style font-variant font-weight font-size line-height font-family （不可少）
必须按顺序给值；
Font-size和font-family不可少
透明度和文章溢出
- Color：rgba(，，，0.5)；
- Opacity：范围0-1，同上rgba中的a
- Overflow：hidden||auto||scroll（内容溢出时：隐藏||自动||滚动条）
White-space：nowrap；同一行显示不换行。
- Text-overflow：ellipsis溢出文字用省略号出现
10、文本属性
1.text-align 内容对齐方式
属性：left|center|right
2.text-decorection
默认无 none
Underline 下划线
Overline 上划线
through - Line 中划线
- text-transform 设置对象中的文本的大小写
默认 none
属性值 capitalize 每个单词首字母大写
Uppercase 全部大写
Lowercase全部小写
- text-indent 文本缩进（常用）
em 与当前字体大小相同，浏览器中文字大小16px
- Word-wrap 设置当前行超过指定容器的边界时是否换行，超过容器宽度会 造成“长单词溢出”
Normal 不变
Break-Word 边界处自动换行（水平方向）
7．Vertical-align
设置对象内容的垂直对齐方式，是容器中元素相对于内容的显示
div{ background: #ff90a6 height；
}
a{
display: inline-block;height: 100px; width: 100px; background: #262799;
vertical-align: middle;
}
/* div中定义了a标签，vertical定义的是a相对于div内容的对齐方式，他和容器的高度无关，与文字内容有关 ，调整的是div内容 */
</style>
</head>
<body>
<div>
这里有内容 <a href="">超链接</a>
</div>
- line-height 不许负值
normal 默认设置合理行间距
number 设置数字，此数字会与当前字体尺寸相乘来设置行间距
length 设置固定行间距
设置数字
行高等于高
扫一扫
1549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
