css基础:
css是让页面变得更加好看的
css样式创建方式:
1: 内部样式
在head标签中添加style标签
<style type="text/css">
选择器{属性:值;}
</style>
2: 内联样式
<标签 style="属性:值;"></标签>
<标签 style="属性:值;">
3: 外部样式
1:创建一个独立的html文件,后缀为.html
2:创建一个独立的css文件,后缀为.css
3:关联
关联方式一(推荐使用)
在html文件的head标签中添加
<link rel="stylesheet" type="text/css" href="css文件地址">
rel="stylesheet" 申明link引入的文件是层叠样式表
type="text/css" 申明文件的类型为文本类型的css
关联方式二(了解)
在head标签中的style标签中的第一行添加
@import url("css文件地址");
两种关联方式的区别:
1: 本质区别,link是标签,@import是css提供的一种写法
2: 加载顺序区别,link同时加载,@import是后加载
3: 兼容性区别,link没有兼容问题,@import低版本ie不兼容
4: 能否被dom控制,link能被js控制,@import不能被js控制
css样式表的权重关系:
内联样式 > 内部样式 / 外部样式
选择器:选中指定的元素
类型选择器: div p ul li....
类选择器(class选择器):
<标签 class="name"></标签>
.name{}
【注】
1: 在同一个页面中相同的class值可以有多个
2: 在同一个class中可以有多个值
3: 具有重用性,通常用来写样式
id选择器:
<标签 id="name"></标签>
#name{}
【注】
1: 在同一个页面中相同的id值只有一个
2: 在同一个id中只有一个值
3: 具有唯一性,通常不用来写样式
* 通配符: 匹配页面中所有的元素
*{margin:0;padding:0;} 样式初始化
群组选择器:
选择器1,选择器2,选择器3{} 匹配1 2 3
包含选择器:
选择器1 选择器2 选择器3{} 匹配1里面的2里面的3,最终匹配3
选择器权重:
id选择器 > 类选择器 > 类型选择器
css属性:
font-size:文本大小;
12px 最小文本大小
16px 默认文本大小
em 跟随最近的font-size值成倍数关系
rem 跟随根元素(html)的font-size值成倍数关系
关键字
color:文本颜色;
颜色单词: red blue green..
十六进制:
# 0-9 a-f #aabbcc => #abc
三原色: r 红色 g 绿色 b 蓝色 a 透明度
rgb(0,0,0)
rgba(0,0,0,0)
rgb 取值范围 0-255
a 取值范围 0-1
font-family:字体1,字体2,字体3;
【注】多个字体时，用逗号隔开
中文标示一个字体时要添加引号
多个单词表示一个字体时，需要添加引号
font-weight:是否加粗;
bold 加粗效果
bolder 粗体字
normal 常规文本(不加粗)
100-300 不加粗
400 == normal 常规文本
500 不加粗
600-900 加粗
font-style:是否倾斜;
italic 倾斜效果
oblique 斜体字
normal 常规文本
line-height:行高; 文本垂直对齐方式
行高值 < 高度值 偏上
行高值 = 高度值 居中
行高值 > 高度值 偏下
【注】不能为负数
line-height: 1;
去除默认间距，只保留字的大小
font:倾斜 加粗 大小/行高 字体;
text-align:文本水平对齐方式;
left 靠左
center 居中
right 靠右
justify 两端对齐
text-indent:首行缩进;
px em
【注】只针对第一行有效
可以为负数
list-style:none; == list-style-type:none;取消修饰符
背景相关属性:
background-color:背景颜色;
颜色单词: red blue green..
十六进制:
# 0-9 a-f #aabbcc => #abc
三原色: r 红色 g 绿色 b 蓝色 a 透明度
rgb(0,0,0)
rgba(0,0,0,0)
rgb 取值范围 0-255
a 取值范围 0-1
background-image:url('背景图片地址');
【注】图片默认重复
background-repeat:图片是否重复;
repeat 重复
no-repeat 不重复
repeat-x 水平重复
repeat-y 垂直重复
background-position:背景图定位;
left center right
top center bottom
px %
【注】可以为负数
bakground-attachment:背景图是否关联;
scroll 滚动查看
fixed 固定
background-size:背景图大小;
px %
background:颜色 url("图片地址") 是否重复 定位/大小 关联;
浮动: 让原本竖着排列的元素横着排列
float:;
none 不浮动
left 左浮动
right 右浮动
【注】在一行显示的元素都必须加浮动
特征:
1: 脱离文档流(元素默认从上至下从左至右的排列顺序)
2: 左浮动找左浮动,右浮动找右浮动
3: 贴靠现象
4: 图文混排
【注】如果子元素添加了浮动，那父元素就要添加高度(暂时的解决办法)
继承: 给父元素设置样式,未给子元素设置,但是作用到了子元素身上
盒模型的组成:
内容区 width height
内边距区 padding
边框区 border
外边距区 margin
padding:内边距;
padding-top:上内边距;
padding-right:右内边距;
padding-bottom:下内边距;
padding-left:左内边距;
padding:四个方向;
padding:上下 左右;
padding:上 左右 下;
padding:上 右 下 左;
【注】
没有负数，没有auto
会撑大元素的大小
不会对背景图造成影响
margin:外边距;
margin-top:上外边距;
margin-right:右外边距;
margin-bottom:下外边距;
margin-left:左外边距;
margin:四个方向;
margin:上下 左右;
margin:上 左右 下;
margin:上 右 下 左;
【注】
有负数，有auto,表示水平自适应
步会撑大元素的大小
问题: 垂直防线的外边距相遇会重合
解决办法:
兄弟关系: 给一个方向加足够的间距
嵌套关系: 给父元素添加上内边距
border:边框大小 形态 颜色;
常见形态:
solid 实线
dashed 虚线
dotted 点状线
double 双线
border-top:上边框大小 形态 颜色;
border-top-width:上边框大小;
border-top-style:上边框形态;
border-top-color:上边框颜色;
borer-width:边框大小;
border-syle:边框形态;
border-color:边框颜色;
三角形:
width:0;
height:0;
border:30px solid transparent;
border-top-color:red;
盒模型大小计算:
W = width + 左右内边距 + 左右边框 + 左右外边距
H = height + 上下内边距 + 上下边框 + 上下外边距
overflow:文本溢出;
visible 默认值
hidden 超出隐藏
scroll 滚动查看
auto 自适应
white-space:文本格式;
normal
pre 保留格式
pre-wrap 缩进不换行
pre-line 缩进换行
nowrap 强制不换行,遇到br还是会换行
text-overflow:是否显示省略号;
clip 裁剪
ellipsis 省略号
省略号步骤:
width:200px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
【注】只针对单行文本有效
元素类型分类:
块级元素(block): div p ul ol li dt dd dl h1 h2....
1: 独占一行
2: 矩形显示
3: 能设置宽高
4: 能正常设置内外边距
5: 通常作为容器使用
内联元素(inline):a u i em b strong....
1: 只占据自己内容大小的位置
2: 非矩形显示(最小单位除外)
3: 不能设置宽高
4: 不能正常设置垂直方向的内外边距
5: 通常不作为容器使用
