CSS
CSS
- 作用：美化网页（HTML） 提供更多样式功能
- 运行机制：浏览器
- 语法： 样式属性名：值；
CSS样式添加方式
- 1.行内样式（内联样式）
<标签 style="css样式代码"></标签> 说明：html标签通用属性 style
样式例子： font-size：文字大小 值 数字px color：标签内的文字颜色 font-family：字体
background-color :颜色 背景色
- 2.内嵌样式
语法格式： 选择器 ： 选择标签 <!--放在head中--> <style type="text/css"> 选择器{ 样式属性名：值； 样式属性名：值； 样式属性名：值； } </style>
选择器类型：
标签选择器
标签名{
css代码
}
class选择器（类选择器）
- 1.所有html标签公共属性 class=“名字”
- 2.使用class选择器添加样式
.class{
css代码
}
ID选择器
- 1.所有html标签都有id属性名（id属性不能重复）
- 2.使用id选择器添加样式
#id值{
css代码
}
伪类选择器（鼠标移入选择器）
css选择器:hover{
css样式
}
解释：当鼠标移动到选择器选择的标签上以后，才会生效，移出后消失
父子选择器
作用：精确选择子标签
语法：父标签（选择器）>子标签（选择器）
父标签>子标签{
css代码
}
注意：行内样式style属性的方式，优先级高于内嵌样式。
3.外部引入样式文件
- 1.将公用的样式css代码放在css文件（*.css）
- 2.在需要使用样式的html网页中，引入外部样式文件
<link rel="stylesheet" href="外部css文件的路径">
常见css样式
1.文本相关
font-size：80px 字体大小
font-family：草书 字体
color：red 字体颜色
text-decoration：none 无下划线 underline 有下划线
2.边框相关
border：样式 粗细 颜色
border：solid 2px red
width：宽
height：高
3.背景相关：
background-image：url（图片路径）； 背景图片
background-repeat：no-repeat repeat repeat-x repeat-y 背景平铺
background-position：center； 背景对齐位置
background-color：red 背景颜色
4.鼠标相关
cursor：pointer wait move
5.其他
显示样式：display
inline 行内
block 块
none 消失（不显示），元素占用网页空间变成0
列表样式：
list-style-type：none； 取消列表默认样式
网页布局
span
特征：
- 1.没有任何特征
- 2.是行级元素
对网页的内容，在不改变格局情况下，样式微调
<span style="font-size: 50px; color:blue">G</span>
div
特征：
- 1.没有效果
- 2.是块级元素
样式：
width height 边框
盒子模型
div空间就是盒子
内补白（内间距）padding：内容和盒子内壁之间的距离
边框border ：盒子厚度
外补白（外间距）margin：盒子和外部元素距离
定位
绝对定位：相对于父容器（父标签）的位置
position:sbsolute; 相对父标签的位置，忽略同级别元素的位置
left： 与父容器左边的距离
top：与父容器上边的距离
z-index：数字，距离用户的层级
浮动定位：
float：left；将div浮动展示，变成行元素
第三方样式库
草莓图标库
1.引入css样式库
<link rel="stylesheet" href="外部css文件的路径">
2.使用
<span class="图标样式class名" ></span> <span class="czs-Google" style="font-size: 30px;"></span>
BootStrap布局
特点：
1.使用div标签
2.使用table布局思路（ 行 列 ）
使用步骤：
1.最外层div
class=“container” 布局内容和网页左右两侧，留白
class=“container-fluid” 宽度占用网页100% 适用于后天管理系统
2.划分行
<div class=“row”>
3.在行内部划分单元格
行内默认划分12格，最多只能用12格
<div class=“col-md-1到12的数字”>
