css(层叠样式表)基础知识与常见案例
一、基础知识
1.作用:渲染页面;提高工作效率,将html和样式分离 ★
2.css和html元素的整合(三种方式)★★
(1)方式1:内联样式表
通过标签的style属性设置样式
例如:<xxx style="属性:值;"/>
(2)方式2:内部样式表(常用)
在当前页面中使用的样式,通过head标签的style子标签导入
例如:
<style type="text/css">
选择器{
属性:值;
属性1:值1;
}
</style>
(3)方式3:外部样式表
有独立的css文件,后缀名:.css,通过head标签的link子标签导入
例如:<link rel="stylesheet" href="css/1.css" type="text/css"/>
3.选择器(六类)★★
(1)id选择器
要求:
html元素必须有id属性且有值 <xxx id="id1"></xxx>
css中通过"#"引入,后面加上id的值 #id1{...}
(2)class选择器
要求:
html元素必须有class属性且有值 <xxx class="cls1"/>
css中通过"."引入,后面加上class的值 .cls1{...}
(3)元素选择器
直接用元素(标签)名即可 xxx{...}
(4)属性选择器(派生的选择器)★
要求:
html元素必须有一个属性且有值 <xxx att="val1"/>
css中通过下面的方式使用:元素名[属性="属性值"]{....}
例如:xxx[att="val1"]{....}
(5)后代选择器(派生的选择器)
选择器 后代选择器{...}
在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式
(6)锚伪类选择器(了解的选择器)
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
(7)选择器使用小结:
id选择器:一个元素(标签)
class选择器:一类元素
元素选择器:一种元素
属性选择器:元素选择器的特殊用法
4.各种属性(字体属性,文本属性,其他属性)(了解)★
(1)字体
font-family:设置字体(隶书) 设置字体家族
font-size:设置字体大小
font-style:设置字体风格
(2)文本:改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进
color:文本颜色
line-height:设置行高
text-decoration: 向文本添加修饰。 none(不加下划线) underline(加下划线)
text-align:对齐文本
(3)列表:
list-style-type :设置列表项的类型 例如:a 1 实心圆
list-style-image:设置图片作为列表项类型 使用的时候使用 url函数 url("/i/arrow.gif");
(4)背景:
background-color:设置背景颜色
background-image:设置图片作为背景 使用的时候使用 url函数 url("/i/arrow.gif");
(5)尺寸:
width :宽
height:高
(6)浮动:
float: 定义元素在哪个方向浮动 可选值 left right
(7)分类:
clear :设置元素的两边是否有其他的浮动元素;值为:both 两边都不允许有浮动元素
display:设置是否及如何显示元素。
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
5.框模型(理解)★
一个元素外面有padding(内边距) border(边框) margin(外边距)
padding:元素和边框的距离
margin :元素最外层的空白
设置值的顺序:上右下左
6.标签
div :块标签 <div></div>
span:行内的块标签 <span></span>
二、常见案例
案例:用div+css重新布局首页
(1)需求:通过div+css将首页信息展示
(2)技术分析:div,css,选择器,属性,框模型
(3)步骤分析:
a.创建一个div
b.在这个div中创建8个div
c.第1个div logo 嵌套三个div
d.第2个div 菜单 嵌套一个列表 display:inline
e.第3个div 轮播图
f. 第4个div 热门商品
标题标签 图片 display:inline
fa:两个div
左边的div 展示一张图片
右边的div 展示所有商品
fb.右边的div中嵌套10个div
g.第5个div 广告
h.第6个div 最新商品
i. 第7个div 广告
j. 第8个div foot 版权 两个p标签