CSS练习记录
css引入方式
内联引入
<body>
<div style="color:red;width:100px;heigh:100px;">苹果</div>
<div style="color:green;width:100px;heigh:100px;">苹果</div>
<div style="color:gray;width:100px;heigh:100px;">核桃</div>
<div style="color:yellow;width:100px;heigh:100px;">香蕉</div>
</body>
内部引入
<style>
div{
color:red;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div>苹果</div>
</body>
外部引入
![](https://img-blog.csdnimg.cn/20190330180205676.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTMxNjY5,size_16,color_FFFFFF,t_70)
css选择器
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
选择器主要由有四大类:
- 基本选择器
- 组合选择器
- 属性选择器
- 伪元素选择器
基本选择器:
通配符:全部都被标注!
标签div:
div{
}只有对应的div才被标注
id选择器:
class:
**css原理**
1.优先原理:后解析的内容会覆盖掉之前的内容
2.继承原则:嵌套里面的标签拥有外部标签的某些样式;子元素可以继承父元素的属性。
优先原则:-》选择器
1.同一个选择器:从上往下执行。
效果如下
3.不同类型的选择器:优先级
先解析低优先级;
div<class<id
原理同上
4.外部样式 内部样式合并之后再一起解析
先外部样式再内部。
其他原理同上。
5.内联样式:外部和内部解析完之后再解析内联。
6.加了important字段的 最后执行。
继承原则
1.文字 文本 样式 可被继承
div.txt{
color:red;
}
<body>
<div class="txt">
苹果
<p> 香蕉 </p>
</div>
</body>
其中苹果和香蕉属性相同。
2.块级元素 宽度不被设置时则会继承父级元素的宽,高由内容决定。
组合选择器
把基本选择器 通过特殊字符串在一起
分组选择器
用逗号隔开:div,p 代表两个选择器内容共同
嵌套选择器
用空格隔开:div p 嵌套在div里的p才能生效
子选择器
div>p 必须是上一级的div才能生效。
相邻选择器;同级别的
div+p
属性选择器
css背景
CSS 属性定义背景效果:
background-color属性定义了元素的背景颜色.
background-image属性描述了元素的背景图像.
默认情况下,背景图像进行平铺重复显示
background-repeat:
background-repeat:repeat-x;水平方向平铺
background-repeat:repeat-y;垂直方向平铺
background-repeat:no-repeat;不平铺
background-attachment:
scroll
背景图片随页面的其余部分滚动。这是默认
fixed
背景图像是固定的
使用简写属性时,属性值的顺序为::
background-color
background-image
background-repeat
background-attachment
background-position
css字体
font
在一个声明中设置所有的字体属性
font-family
指定文本的字体系列
font-size
指定文本的字体大小
font-style
指定文本的字体样式
font-variant
以小型大写字体或者正常字体显示文本。
font-weight
指定字体的粗细。
css链接和列表
链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。
特别的链接,可以有不同的样式,这取决于他们是什么状态。
这四个链接状态是:
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
css盒子模型
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
css布局
清除浮动在下一个div中添加
div{
clean :both;
}就可以将恢复浮动
css定位
position 属性的五个值:
static:HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
relative:相对定位元素的定位是相对其正常位置。
fixed:元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动:
absolute:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于:
sticky:这个有点魔性,就不写了。。。