CSS
为什么要使用CSS ?
样式表能实现内容与样式的分离,方便团队开发
样式复用、方便网站的后期维护
页面的精确控制,实现精美、复杂页面
CSS的用途?
1、外观美化
2、布局、定位
语法:
<head>
<style type="text/css"> 注意:类型的声明 CSS
选择器(即修饰对象){
对象的属性1: 属性值1;
对象的属性2: 属性值2;
}
</style>
</head>
选择器的分类
1.标签选择器
标签名{
color:red;
background:green;
}
eg.
li{
color:red;
font-size:28px;
font-family:隶书;
}
2.类选择器
<style type="text/css">
.blue{color:blue;}
……
</style>
<div class="blue" ></div>
类选择器优先级比标签选择器高
3.id选择器
<style>
#menu{
width:200px; background:#ccc;
font:bold 14px 宋体;
}
</style>
<div id ="menu" ></div>
优先级别:id选择器 > class类选择器 > 标签选择器
具体css优先级-->请参考
外部样式表的引用
关联文件 路径 类型
<link rel="stylesheet" href=CSS外部文件名 type="text/css" />
行内样式 > 内部样式 > 外部样式
就近原则
字体、字号:
font(缩写形式)
font-weight(粗细)
font-size(大小)
font-family(字体)
行距、对齐等:
line-height (行高)
text-align (对齐)
letter-spacing (字符间距)
text-decoration (文本修饰 )
背景
background (缩写形式)
background-color(背景色 )
background-image(背景图 )
background-repeat(背景图重复方式 )
background-position(位置坐标、偏移量)
针对于<li>
属性值 方式 语法实现 示例
none 无风格 list-style:none; 刷牙 洗脸
disc 实心圆(<ul>默认类型) list-style:disc; ● 刷牙 ● 洗脸
circle 空心圆 list-style:circle; ○ 刷牙 ○ 洗脸
square 实心正方形 list-style:square; ■ 刷牙 ■ 洗脸
decimal 数字(<ol>默认类型) list-style:decimal 1. 刷牙 2. 洗脸
-------------------------------------------------------------
css的布局
<div>模型
1.盒模型 网页中的所有元素可以看作一个一个的“盒子”
元素内容
填充(也称内边距)
边框
边界(也称外边距)
盒子属性:
border(边框)
margin(外边距/边界)
padding(内边距/填充 )
margin
margin-top
margin-right
margin-bottom
margin-left
eg.
margin:1px 2px 3px 4px; (上,右,下,左)(顺序以人为基准)(顺时针)
padding: 10px 50px;
属性值 auto 指 左右居中 上下置顶
注意:如果两个属性 上 、 左
用空格间隔
border属性
border-color
border-width
border-style
元素的实际占位(实际宽、高)
盒子高度 = height属性 + 上下填充高度 + 上下边框高度
盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度
body {
margin:100px; //指<body>对浏览器上边框的距离
padding:100px; //距离<body>的上边框的距离
background:#ccc;
}
浮动的三大显著特征
1.DIV块元素失去“块状”换行显示特征,变为行内元素 就是失去了前后换行
2.紧贴上一个浮动元素(同方向)或父级元素的边框,如宽度不够将换行显示
3.占据行内元素的空间,导致行内元素围绕显示
float right/left 漂浮
clear both/right/left 对应左右不漂浮
超链接伪类样式
四个伪类样式(建议使用)
a:link{color: #FF0000;/*未访问超链接时字体的颜色为红色*/}
a:visited{color: #60C5F1;/*已访问超链接时字体的颜色为蓝色*/}
a:hover{color: #FFF766;/*鼠标移动到超链接上时字体的颜色为黄色*/}
a:active{color: #22B14C;/*鼠标移动到超链接上并按下时(激活选定状态)字体的颜色为绿色*/}
CSS 伪类、伪元素、超链接伪类样式<--学习
三类应用样式的方式
行内样式 只作用于本标签
内部样式表 只作用于本页面
外部样式表 作用于各网页
各类样式的优先级
浏览器默认设置 <外部样式表文件 <内部样式表 <行内样式表
(就近原则:同级别样式 选择就近样式)
布局:
div-ul(ol)-li:常用于分类导航或菜单等场合;
div-dl-dt-dd:常用于图文混编场合;
table-tr-td:常用于图文布局或显示数据的场合; 展示
form-table-tr-td:常用于布局表单的场合; 提交数据
实现步骤
先建立HTML标签组织结构
建立CSS样式表,逐一添加各类样式
测试样式细节