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的数字”>