CSS概述
- HTML缺陷
- 不能适应多种设备
- 要求浏览器必须智能化足够大
- 数据和显示没有分开
- 功能不够强大
- CSS优点
- 使数据和显示分开
- 降低网络流量
- 使整个网站视觉效果一致
- 提高开发效率
CSS语法
<style type = "text/css">
p{ //所有的p标签所应用的样式,只用一个就行
font-weight:bold;
font-style:italic;
}
</style>
选择器{属性名:属性值 ;}
选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号
属性名和冒号之间最好不要有空格。
CSS与HTML相结合
- CSS中注释,
/* */
1,行级样式表:可以写在开始标签里面,采用style属性完成
*<p style = "color:red">你好!</p>
2,内部样式表:采用style标签完成,针对整个页面
<style type = "text/css">
p{
font-weight:bold;
font-style:italic;
}
</style>
- 3,外部样式表:采用外部css文件完成,针对多个页面
- 文件中不用写style标签了
- 要想在页面中使用,需要引入
<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
css选择器
- 1,基本选择器
- a,标签选择器:就是选择了页面上一类标签
div{
border:1px solid red;
}
* b,类选择器:规定用圆点. 来定义,比较灵活,哪个想用哪个引 //如两个标签用同样的样式
.one{
border:1px solid red;
}
<div class = "one">萌萌哒^_^</div>
* c,ID选择器:用#来定义,针对特定的一个标签用(ID是唯一的)
#two{
border:3px dashed green;
}
<h2 id = "two">你好</h2>
* d,通用选择器,*来定义,代表页面上所有的标签
*{
padding:0px;
margin:0px;
color:blue;
}
* 2,扩展选择器
* a,组合选择器:用逗号隔开多个选择器
div,p,h1,.one,#two{
border:5px double blue;
}
* b,关联选择器(后代选择器):用空格格开,表示
* h3里面的i标签会变红色,下面的i标签不会变
h3 i{
color:red;
}
<h3>我爱<b>北京<i>开安门</i></b></h3></br>
<i>北京</i>
* c,伪类选择器
* 1):静态伪类:只能用于超链接(2个),:link,:visited
* link:超链接点击之前的颜色
* visited:点击之后的颜色
a:link{
color:red;
}
a:visited{
color:green;
}
* a()与a:link{}区别:
* a()包括了锚点,a:link{}不包括锚点
* 2):动态伪类:适用于各种标签
* :onfocus 控件获得焦点
input:focus{
border:1px solid red;
color:green;
background-color:#ffccff;
}
<input type="text" name="">
* :active 点击控件的时候
* :hover 当鼠标移动到某个控件上方的时候
样式表冲突的解决
- 1,行级 > 内部 > 外部
- 2,ID选择器 > 类选择器 > 标签选择器
* 外部ID选择器 > 内部标签选择器
* 原则:就近原则,指定义还有引入的位置
link标签的rel属性
- rel属性值
- 1,stylesheet:定义样式表
- 2,alternate stylesheet:候选样式表
css各种属性
- 字体属性
p{
font-size:30px;
font-family:华文彩云,幼圆,宋体; //","隔开,前面的优先调用,当字体库中没有时再调用其它
font-weight:bolder;
font-style:italic;
font-variant:small-caps; //小写变大写
}
- 文本属性
- color,direction,letter-spacing(字母间距),text-align,text-decoration
p{
letter-spacing:0.1cm;
word-spacing:0.5cm;
text-align:center; //容器的中间
text-decoration:underline; //修饰,下划线
text-transform:capitalize; //每个单词首字母大写
color:red;
}
- 背景属性
body{
background-image:url(images/1.jpg); //背景图片
background-repeat:no-repeat; //不重复,repeat-x横向平铺
background-position:center center; //位置,正中
background-attachment:scroll; //背景滚动,fixed跟着滚动条一起移动,scroll不动
background-color:#ffff66; //背景颜色
}
- 列表属性
ol{
list-style-image:url(images/1.jpg); //列表图片
margin-left:100px; //图片的位置
}
盒子模型
- padding:是内容到边的距离
- //两个值(上下,左右),三个值(上,左右,下),四个值(上,右,下,左【顺时针】)
- border: 是边的粗细
- margin:是控件到控件的距离
- padding:是内容到边的距离
div{
width:100px;
height:100px;
border:1px solid red;
padding:10px;
margin:30px; //浏览器默认body 8px
}
- 定位属性position
- 1,绝对定位: 原点在父容器的左上角,向上、向右为正
div{
position:absolute;
left:20px;
top:20px;
width:200px;
height:200px;
border:1px solid red;
}
p{
position:absolute;
left:20px;
top:20px;
}
* 2,相对定位:相对于自己原来的位置(左上角为原点)
#d1{
position:relative;
left:50px;
top:-50px;
width:200px;
height:200px;
border:3px dotted red;
}
* 顺序流:所有标签初始排列顺序为顺序流
* 两种情况控件脱离顺序流
* 1,把控件的位置设置为绝对定位absolute
* 2,当设置控件的float属性时
float,z-index,overfloat属性
- float属性:浮动(向左和向右)
//两个div左右并排
div{
width:200px;
height:200px;
float:left;
}
#d{
background-color:#ff99ff;
}
#d1{
background-color:#00ff33;
}
* 用clear去除float
* clear:both; //两边都不要float对象,但没有去掉float,还是脱离顺序流
overflow:盒子里的内容超出类范围
- overflow:auto; //浏览器自己解决,会给你自动加滚动条
- visiable; //会自动加大,一般用auto
- hidden; //隐藏
z-index属性:垂直于页面的方向看作一个层,值越大离我们越近(大的在上面,小的在下面)
鼠标的样式
- hand不支持就改成pointer
p:hover{
cursor:pointer;
}
滤镜(了解)
style = "filter:wave()"
导航栏菜单制作
<style type="text/css">
li{
float:left;
margin-left:20px;
}
ul{
list-style:none;
width:900px;
height:30px;
background-color:black;
padding-top:10px;
padding-left:0px;
}
a{
text-decoration:none;
color:white;
}
</style>