CSS3
CSS3 –行内样式、内联样式、外联样式、选择器类型
C(cascade)SS(StyleSheet) 级联样式表
1. 行内样式(优先显示和覆盖)：
<标签 style="css样式代码"></标签>
说明: html标签通用属性: style
样式例子:
font-size: 文字大小 值 数字px
color: 标签内的文字颜色.
font-family: 字体
background-color:颜色 背景色
2. 内嵌样式：
语法格式:
选择器: 选择标签. <!--放在head中-->
<style type='text/css'>
选择器{
样式属性名:值;
样式属性名:值;
}
</style>
3. 外部引入样式文件：
①将公用的样式css代码放在 css文件(*.css)
②在需要使用样式的html网页中,引入外部样式文件
<link rel="stylesheet" href="外部css文件的路径">
4. 选择器类型:
① 标签选择器:
标签名{
css代码
}
② class选择器 (类选择器)
使用：
①所有html标签公共属性 class="名字"
②使用class选择器添加样式
语法:
.class名字{
css代码
}
③ ID选择器:
使用:
①所有html标签都有id属性名(id属性值不能重复)
②使用id选择器添加样式
语法：
#id值{
css代码
}
④ 伪类选择器：
鼠标移入选择器:
css选择器:hover{
css样式
}
解释: 当鼠标移动到选择器选择的标签上以后,才会生效样式, 移出后,样式消失.
⑤ 父子选择器：
作用: 精确选择子标签
语法: 父标签>子标签
父标签>子标签{
css代码
}
注意: 行内样式style属性的方式,优先级高于内嵌样式的方式.
CSS3 –常见的CSS样式
常用样式属性:
①文本相关
font-size:80px 字体大小
font-family:隶书; 字体
color:颜色 文字颜色
text-decoration: none无下划线 | underline有下划线
②边框相关
border:样式 粗细 颜色
border:solid 2px red
width：宽
height：高
border-shadow:3px 3px yellow;
③背景相关
background-image:url(图片路径); 背景图片
background-repeat:no-repeat|repeat|repeat-x|repeat-y 背景平铺
background-position:center; 背景对齐位置
background-color:red; 背景颜色
④鼠标相关
cursor：pointer|wait|move|auto
⑤table相关
border-collapse:collapse; //表格单行框、去掉冲突的边框
⑥补充样式:
显示: display
值: inline 行内
block 块
none 消失(不显示), 元素占用网页空间变成0
概念: 行级元素: 占用空间是在行内部,显示完不会换行.
块级元素: 占满当前行 显示完毕后,会换行
列表样式:
list-style-type: none; 取消列表的默认样式
CSS3 –第三方样式库、栅格化布局
（1）第三方样式库[学会查看文档]
第三方厂商提供现成可用的样式文件
使用:①引入外部定义好的css样式文件
.xxxx{
css样式代码
}
②在需要使用标签使用样式(class="xxxx")
## 草莓图标库
①引入css样式库
<!-- 引入草莓图标库的样式文件 -->
<link rel="stylesheet" href="caomei/style.css">
②使用
<span class="图标样式class名"></span>
BootStrap 样式库
weeter公司: 第三方封装好css样式库.[组件库,jquery插件库]
使用:
①导入bootstrap样式相关文件
引入bootstrap.min.css(开法版的,压缩后)
②在html通过link引入样式
<link rel="stylesheet" href="css/bootstrap.min.css">
③使用标签的class名添加效果.
例如：
a.按钮
标签:
a超链接
button
input
样式:
class="btn"
按钮颜色样式
class="btn-default"
class="btn-primary "
按钮大小:
class="btn-lg"
class="btn-xs"
b.文字
文字颜色:
`<p class="text-success"></p>`
文字背景色:
`<p class="bg-danger"></p>`
c.图片
图片修饰
`<img src="girl.jpg" class="img-thumbnail" width="200px" alt="">`
d.表格
table标签：
<table class="table table-bordered table-hover table-condensed">
table: bootstrap的表格效果
table-bordered: 边框
table-hover: 鼠标移入效果,背景加深
table-condensed: 紧凑型
tr标签(td)：
行背景色
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
e.表单:
表单元素的标签(input select textarea)
`<标签标签 class="form-control">`
（2）栅格布局
核心:
①使用div标签
②使用table布局的思路(行 列)
使用步骤：
a.最外层div
class="container": 布局内容和网页左右两侧,留白.
class="container-fluid": 宽度占用网页100%, 适合做后台管理系统.
b. 划分行
`<div class="row">`
c. 在行内部划分单元格
行内默认划分12格,最多只能使用12格.
`<div class="col-md-1到12的数字">`