css是什么?
css全称:Cascading Style Sheets 用以定义页面元素样式。
h1 {
color:white;
}
h1:选择器(selector)。表示这个样式针对哪个对象。
color:属性(property)。
white:属性值(value)。
color:whilte;:一条声明(declaration)。
如何使用css?
1、外链 (可以实现内容和样式分离)
<link ref = "stylesaheet" href = "css/style.css">
2、嵌入
<style>
div {
width:400px;
<style>
3、内联
<p style = "font-size:24px;"></p>
- css如何工作?
- 选择器(selector)
通配选择器
*:面对所有元素
* {
margin:0;
padding:0;
}
id选择器
id = "demo"
#demo{
color:red;
}
类选择器
class = "demo"
.demo {
color:blue;
}
属性选择器
<input type = "text" disabled>
<style>
[disabled] {
border:1px solid red;
}
</style>
[disabled] 表示:只要标签中包含disabled属性即拥有border:1px solid red的样式。
input[type = "password"] {
background-color:#fff;
}
input[type = "password"] 表示:凡是type属性的属性值为password的input输入框都设置背景颜色为#fff;
延伸:
a[href ^= "#"]{
color:red;
};
a[herf $= ".jpg"]{
color:black;
};
a[href ^= "#"]表示:链接地址以#开头的超链接都有color:red的样式;
a[herf $= ".jpg"]表示:链接地址以.jpg结尾的超链接都有color:black的样式。
伪类选择器
状态伪类选择器,在不同状态下变换不同样式。 如:
a:link //默认样式
a:visited //a链接已经被访问过后的样式
a:hover //悬停样式
a:active //a链接按下事件触发时的样式
:focus //获取焦点事件触发时的样式
结构伪类
根据DOM节点在DOM树的位置选择。
div:first-child;
div:last-child;
first-child表示;处于第一个位置的某个元素(这里指第一个div)
last-child表示:处于最后一个位置的某个元素(这里指最后一个div)
相对父级节点的相对位置
一般用组合标签
<input class = "error">
<input type = "text">
<style>
input.error{
border:1px solid red;
}
</style>
文字样式、文字颜色、RGB这里就不过多赘述。
HSL HSL全称:
Hue-Saturation-Lightness
色相 - 饱和度 - 亮度
- 字体font-family
规则:字体列表最后要写上通用字体族;英文字体要放在字体前面;引用外部字体样式一般用于英文字体,因为中文字体文件较大。
@font-face{
font-family : "demo";
src = url("");
format("woff2");
}
h1 {
font-family:"demo";
}
-
字体大小font-size
关键字:small、medium、large;
长度:px、em(相对父元素);
百分数:相对父元素。 -
字体粗细font-weight
关键字:normal、bold;
px -
行高line-height
div{
font-size:20px;
line-height:1.6;
}
此时:line-height = 32px
简写 font:weight size/line-height family
(斜体 粗细 大小/行高 字体)
-
间距
letter-spacing:字符之间的距离;
word-spacing:单词之间的距离; -
缩进text-indent
-
文字修饰text-decoration
underline:下划线;
line-through:删除线;
overline:上划线 -
空白符white-space决定空格和换行是否保留
nowrap:不换行,会出现横向滚动条;
pre:保留空格个换行;
pre-wrap:会换行(如果一行内显示不下换行);
pre-line:会换行,但是会合并空格。
深入css
选择器的特异度(specificity)
例:
<h1 class = "title"></h1>
<style>
h1 {
color:red;
};
.title {
color:blue;
}
</style>
思考:这两个样式哪个会生效?
以id (伪)类 标签为顺序。
h1 0 0 1 =>1
.title 0 1 0 => 10
10 > 1 所以.title生效。
- 继承
继承 是指:某些属性会自动继承其父元素的计算值,除非显示指定一个值。 注意,盒模型的尺寸不可继承,如width、height。
显示继承:
*{
box-sizing:inherit; //本不可继承
}
html{
box-sizing:border-box; //html内的所有元素默认border-box
}
- 初始值
初始值 是指:css中每个属性都有一个初始值(可使用initial重置为初始值)。 - css求值过程
(css原理,即解析DOM树后如何将对应节点渲染样式,生成渲染树)
布局
确定内容大小和位置的算法;
依据元素、容器、兄弟节点和内容等信息来计算。
布局模式
1、常规流 – 行级、块级、表格布局、flexBox、Grid布局;
2、浮动(float)布局;
3、绝对定位。
padding属性
作用:确定元素四个方向的内边距;
顺序分别为:上 右 下 左;
一个例子: 如果要实现多终端一个盒模型始终保持宽高为1:1,如何做?
div{
height : 0;
padding-top:100%;
padding-top:100%表示相对于容器,内边距为容器的宽的百分百。
}
一个例子!!!!css写出一个三角形!!
div{
wdith:0;
height:0;
border-top:1px solid red;
}
- margin属性
margin:auto => 盒模型水平居中
margin collapse 边距合并/折叠,在垂直方向同时存在margin-top和margin-bottom时,取较大值。
举例:
<div class="a"></div>
<div class="b"></div>
<style>
.a {
border: 1px solid red;
width: 100px;
height: 100px;
margin-bottom: 100px;
}
.b {
border: 1px solid blue;
width: 100px;
height: 100px;
margin-top: 100px;
}
</style>
- box-sizing属性
box-sizing:border-box:width和height包含了padding、border在内。如果width:100%,则内容的width<100%。
<style>
div {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 10px solid red;
}
</style>
- overflow属性
visible:若内容溢出,不隐藏。
hidden:若内容溢出,隐藏,且没有滚动条。
scroll:不管内容是否溢出,都有滚动条。
块级盒子与行级盒子的区别?
块级盒子
全称:Block Level Box
- 不和其他合资并列摆放;
- 使用所有的盒模型属性;
- 常见会生成块级盒子的块级元素:body、aside、div、main、section、h1~h6、p、ul、li。
行级盒子
全称:Inline Level Box
- 一些行级盒子放在一行或拆开成多行;
- width、height不适用;
- 常见会生成行级盒子的行级元素:span、em、strong、cite、code
常规流常见的布局?
行级摆放上下文(IFC)
全称:Inline Formatting Content
- 盒子在一行内水平摆放;
- 一行放不下就换行;
- vertical-align控制垂直对齐(有基线);
- text-align控制水命对齐;
- 需要避开float浮动元素。
实现图片、文字居中对齐
verti-align:middle;
块级摆放上下文(BFC)
全称:Block Formatting Content
- 盒子从上到下排列;
- 垂直方向的margin许合并;
- BFC内盒子的margin不会与外面的margin合并;
- BFC不会和float浮动重叠。
Flex Box
- 盒子的摆放流向?
- 盒子的摆放顺序?
- width和height?
- 水平和垂直方向的对齐?
- 是否允许拆行?
摆放顺序
flex-direction: row/row-reverse/volumn/volumn-reverse
水平对齐(主轴)
justify-content:flex-start/flex-end/center/space-between/space-around/space-evenly
垂直对齐(侧轴)
align-item:flex-start/flex-end/center/stretch(拉伸)/baseline(基线)
某一个子元素设置垂直属性align-self
flexibility 子项的弹性
容器有剩余空间,会伸展,否则会收缩
- flex-grow:有剩余空间的伸展能力;
- flex-shrink:空间不足时的收缩能力;
- flex-basis:基础长度
其中,flex-shrink为0时,说明盒子不可被压缩(为刚性盒子),会压缩其他的盒子以达到该刚性盒子的宽高要求。
简写 flex:grow shrink basis
例子:
flex:1 100px // grow/basis
flex:1 0 100px //grow/shrink/basis
Grid布局
display:grid即可生成一个块级的grid容器。 grid-template:相关属性将容器划分成网格。
display: grid;
grid-template-columns: 30px 30px auto;
grid-template-rows: 20px 20px auto;
绝对定位
- position:relative/absolute/static/fixed
- relative :在常规流布局。可以设置top、left、bottom、right来调整偏移长度。
- absolute:脱离常规流(文档流)。相对于最近的非static祖先元素定位。(一般为父级)。不会对流内元素布局造成影响。不设置top、left的话,会放在原来应该在的位置。(可能会有覆盖的情况出现)。
- fixed:相对于视口(一般为屏幕)定位(滚动时它不动)。