|
<center> Web前端-CSSCSS
1.CSS-层叠样式表
CSS与HTML结合的方式
- 行内式:<标签 style = "属性名:属性值">
- 内联式:<style>样式设置</style>
- 外链式:<link rel="stylesheet" href=".css">CSS语法
<style>
选择器{
属性名:属性值
}
</style>
==2.CSS选择器==
基础选择器-类选择器
<style>
.class{}
</style>基础选择器-id选择器
<style>
#id{}
</style>基础选择器-标签选择器
<style>
tag{}
</style>扩展选择器-并列选择器
并列选择器选择并列的所有元素
<style>
元素1,元素2....{}
</style>扩展选择器-后代选择器
后代选择器选择父元素中的所有后代元素
<style>
父元素 后代元素{}
</style>扩展选择器-子元素选择器
后代选择器选择父元素中的直接子元素
<style>
父元素 子元素{}
</style>扩展选择器-属性选择器(一般针对input标签)
属性选择器 元素属性为 特定的属性名及属性值的元素
**如果只写属性名,则选择元素中包含该属性名的元素
<style>
元素[属性名="属性值"]{}
</style>扩展选择器-伪类选择器
伪类选择器选择符合状态的元素
<style>
元素:状态{}
</style>
3.CSS属性
文本
- text-align:文本对其
- color:文本颜色
- vertical-align:垂直对其
- font-size:字体大小
- line-height:行高 -设置行高等于height可以使里面的元素垂直居中背景
- background-color:背景颜色边框
- border:线宽(1px) 线型(solid/dashed) 颜色尺寸
- height: 高度,注意高度一般不能设置百分比
- width: 宽度,可以设置百分比==4.盒子模型==**外边距:margin
- margin:auto 可以将对象设置为居中内边距:padding
使用padding设置时会改变整体box的大小,所以一般作如下设置:
- box-sizing:border box==5.浮动==**注意:要理解浮动的原理
****子元素相对于父元素浮动,即子元素相对于父元素悬浮起来,和父元素不在同一个平面上.
用法:
-float : right/left 创建浮动
-clear: both 清除浮动
什么时候需要浮动?
对于一个整体排版需要按照左右排版时可以使用浮动来控制,如ul的横写
|
|
收藏
淘帖
踩
