前端基础之CSS
2017-11-02 22:31
288 查看
CSS 层叠样式表
1、加样式的方式
（1）行内样式
（2）页面内样式
在head中定义
.+类名（以点开始，后面加上字母）
调用方式为：
井号加上类名（以井号开始，后面加上字母）
调用方式为：
需要注意的是：点加类名可以被多次使用，而井号加类名只能使用一次（具有唯一性）
（3）链接式
新建一个.css文件，在css文件中写入样式，再在.html文件中进行调用。
在head中写入
就可以直接调用.css文件中存在的样式。
（4）导入式
在.css文件中写入样式，在导入到,html文件中。
四种方式的优先级为：内部优先级>外部优先级， 行内优先级>页面优先级， 但是，在样式后加上!important,该样式会变成最高优先级
2、样式
color:red; 字体颜色
font-size:12px; 字体大小
font-style:normal; 字体变正常
background:背景颜色 背景图片路径url(…) 是否重复(no-repeat/repeat-x/repeat-y) 水平位置(left/center/right) 垂直位置(top/center/bottom);
text-align:center/left/right/justify; 文本对齐方式：居中/左对齐/右对齐/两端对齐
text-indent:2em; 首行缩进几个字符
text-decoration:none/overline/underline; 去下划线/加上边线/加下边线
line-height:10px; 行高
border:solid/dashed/double/dotted 1px red; 边框线：实线/虚线/双线/点线
margin 外边距（margin-left/margin-right/margin-top/margin-bottom）
margin:a; 表示四边边距都相同
margin:a b; 表示上下为a，左右为b
margin:a b c; 表示上为a，左右为b,下为c
margin:a b c d; 表示上为a，右为b，下为c，左为d
margin:0 auto;使块状元素处于居中状态
padding内边距（用法与margin相同）
float:left/right; 左浮动、右浮动（可以将图片嵌入文字中）
如果想让块在一行排列，则需要给所有的快加入相同的float
clear:both/left/right; 清除浮动
display:block/online-block; 将行内元素转化成块级元素
border-radius:10px; 圆角矩形（50%时变成圆）
cursor:pointer; 鼠标变成手形状
vertical:top/middle/bottom; 图文垂直对齐方式
display:none;默认隐藏（隐藏后不占位置）
visibility:hidden; 默认隐藏（隐藏后占位置）
超链接的4中状态：
a:link默认状态
a:hover鼠标悬停时的样式
a:active鼠标点击时的样式
a:visited访问后的样式
定位：
position:relative/absolute/fixed 相对定位/绝对定位/固定定位，和top/bottom/left/right一起使用（水平一个值，垂直一个值）
相对定位是以原来的位置为参考点发生偏移
绝对定位是以父元素的位置为参考点发生偏移
浮动与定位不能同时使用
例：
艺龙网站首页上半部分
*{
margin:0;
padding:0;
}
.fl{
float:left;
}
.fr{
float:right;
}
body{
font-size:12px;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
1、加样式的方式
（1）行内样式
<any style="样式名：样式值;"></any>
（2）页面内样式
在head中定义
<style>
.name{
...
}
#box{
...
}
</style>.+类名（以点开始，后面加上字母）
调用方式为：
<any class="name"></any>
井号加上类名（以井号开始，后面加上字母）
调用方式为：
<any id="box"></any>
需要注意的是：点加类名可以被多次使用，而井号加类名只能使用一次（具有唯一性）
（3）链接式
新建一个.css文件，在css文件中写入样式，再在.html文件中进行调用。
在head中写入
<link rel="stylesheet" href=".css文件的路径">
就可以直接调用.css文件中存在的样式。
（4）导入式
在.css文件中写入样式，在导入到,html文件中。
<style> @import url(.css文件的路径) </style>
四种方式的优先级为：内部优先级>外部优先级， 行内优先级>页面优先级， 但是，在样式后加上!important,该样式会变成最高优先级
2、样式
color:red; 字体颜色
font-size:12px; 字体大小
font-style:normal; 字体变正常
background:背景颜色 背景图片路径url(…) 是否重复(no-repeat/repeat-x/repeat-y) 水平位置(left/center/right) 垂直位置(top/center/bottom);
text-align:center/left/right/justify; 文本对齐方式：居中/左对齐/右对齐/两端对齐
text-indent:2em; 首行缩进几个字符
text-decoration:none/overline/underline; 去下划线/加上边线/加下边线
line-height:10px; 行高
border:solid/dashed/double/dotted 1px red; 边框线：实线/虚线/双线/点线
margin 外边距（margin-left/margin-right/margin-top/margin-bottom）
margin:a; 表示四边边距都相同
margin:a b; 表示上下为a，左右为b
margin:a b c; 表示上为a，左右为b,下为c
margin:a b c d; 表示上为a，右为b，下为c，左为d
margin:0 auto;使块状元素处于居中状态
padding内边距（用法与margin相同）
float:left/right; 左浮动、右浮动（可以将图片嵌入文字中）
如果想让块在一行排列，则需要给所有的快加入相同的float
clear:both/left/right; 清除浮动
display:block/online-block; 将行内元素转化成块级元素
border-radius:10px; 圆角矩形（50%时变成圆）
cursor:pointer; 鼠标变成手形状
vertical:top/middle/bottom; 图文垂直对齐方式
display:none;默认隐藏（隐藏后不占位置）
visibility:hidden; 默认隐藏（隐藏后占位置）
超链接的4中状态：
a:link默认状态
a:hover鼠标悬停时的样式
a:active鼠标点击时的样式
a:visited访问后的样式
定位：
position:relative/absolute/fixed 相对定位/绝对定位/固定定位，和top/bottom/left/right一起使用（水平一个值，垂直一个值）
相对定位是以原来的位置为参考点发生偏移
绝对定位是以父元素的位置为参考点发生偏移
浮动与定位不能同时使用
例：
艺龙网站首页上半部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/comen.css"/> <link rel="stylesheet" href="css/index.css"/> </head> <body> <div class="header"> <div class="logo fl"></div> <div class="header-main fl"> <ul> <li><a href="">积分商场</a></li> <li><a href="">礼品卡</a></li> <li><a href="">在线客服</a></li> <li class="last"><a href="">English</a><em></em></li> </ul> </div> <div class="header-right fl"> <ul> <li><i class="i1"></i><span class="s1">小程序<br>体验更轻盈</span></li> <li><i class="i2"></i><span class="s2">手机版<br>专享五折起</span></li> <li><i class="i3"></i><span class="s3">7*24小时电话<br><span class="s4">400-333-333</span></span></li> </ul> </div> </div> <div class="nav"> <div class="nav-con "> <div class="nav-left fl"> <a href="" class="a1">首页</a> <a href="">国内酒店</a> <a href="">国际酒店<i class="discount"></i></a> <a href="">短租公寓</a> <a href="">机票<i class="redpacket"></i></a> <a href="">火车票</a> <a href="">汽车票<i class="book"></i></a> <a href="">旅游指南</a> </div> <div class="nav-right fr"> <a href="">登陆</a>|<a href="">注册</a> </div> </div> </div> <div class="banner"> <div class="ban-con"> <div class="box"></div> </div> </div> </body> </html>
.header{
width: 1200px;
height:100px;
/* background: gray;*/
margin: 0 auto;
}
.logo{
background: url("../img/icon201706.png") no-repeat -660px top;
width:120px;
height:50px;
margin-top: 15px;
}
.header-main{
margin-left: 200px;
width: 400px;
margin-top: 20px;
}
.header-main ul li{
float:left;
width: 70px;
border-right:solid 1px #ccc;
text-align: center;
position: relative;
}
.header-main ul li.last{
border: none;
}
.header-main ul li a{
color: #999999;
}
.header-main ul li:hover a{
color:#ff0000;
}
.header-main ul li em{
width:0;
height:0;
top:5px;
right:0;
border-left:solid 5px #fff;
border-right:solid 5px #fff;
border-top:solid 5px #999;
position: absolute;
}
.header-right{
margin-top: 20px;
}
.header-right ul li{
float:left;
width: 160px;
}
.header-right ul li i{
width:40px;
height: 40px;
background:pink;
display:inline-block;
vertical-align:top;
margin-right: 5px;
}
.header-right ul li span{
width:110px;
height: 20px;
line-height: 20px;
display: inline-block;
/*font-size:16px;*/
}
.header-right ul li i.i1{
background: url("../img/icon201706.png") no-repeat -127px -763px;
}
.header-right ul li i.i2{
background: url("../img/com_icon01.gif") no-repeat center;
}
.header-right ul li i.i3{
background: url("../img/icon201706.png") no-repeat -43px -763px;
}
.header-right ul li span.s1{
font-size: 16px;
color:#09bb07;
}
.header-right ul li span.s2{
font-size: 16px;
color: #ff6c67;
}
.header-right ul li span.s3{
color:#999;
}
.header-right ul li span.s4{
font-size: 16px;
color: #3025b8;
}
.nav{
width:100%;
height:40px;
background: #3a25eb;
}
.nav-con{
width: 1200px;
height:40px;
color:#fff;
margin: 0 auto;
}
.nav-left a{
float:left;
font-size: 16px;
color: #fff;
height:40px;
line-height: 40px;
padding-left: 20px;
padding-right: 20px;
border-right: ridge 1px rgb(57, 39, 225);
}
.nav-left a:hover{
background:#3025b8 ;
}
.nav-left a.a1{
background: #252287;
}
.nav-right a{
font-size: 16px;
color: #fff;
height:40px;
line-height: 40px;
padding-left: 20px;
padding-right: 20px;
}
.nav-right a:hover{
color:yellow;
}
.nav-right{
background:#252287;
}
/*.nav-right .discount{
}*/
.banner{
width:100%;
height: 380px;
background: pink url("../img/images150950275208868.jpg") no-repeat center;
}
/*.ban-con{
background: url("../img/images150950275208868.jpg") no-repeat center;
}*/
.nav-left a{
position: relative;
}
.nav-left a i{
width: 40px;
height: 20px;
display: block;
position: absolute;
top:-10px;
right:0;
}
.discount{
width: 26px !important;
background:url(../img/icon201706.png) no-repeat -512px top;
}
.redpacket{
background:url(../img/icon201706.png) no-repeat -590px top;
}
.book{
background:url(../img/icon201706.png) no-repeat -540px top;
}*{
margin:0;
padding:0;
}
.fl{
float:left;
}
.fr{
float:right;
}
body{
font-size:12px;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 前端学习——css基础知识与html模板
- 前端css基础知识（4）
- web前端 基础部分（二） CSS
- 前端基础-03-CSS属性
- 前端基础面试题大全-极乐科技（二）-HTML+CSS部分
- 前端基础知识html css
- 【前端】CSS基础02-通配符,id,类选择器
- 前端学习之路css(05)-基础知识
- 前端基础之CSS
- 从零开始学习前端开发 — 2、CSS基础
- 前端CSS基础之 clear：both
- 〖前端开发〗HTML/CSS基础知识学习笔记
- 前端开发：css基础知识之盒模型以及浮动布局。
- 学习笔记-《零基础学习HTML5—html+css基础 》1.前端认知
- 前端-CSS（基础）
- 前端基础之CSS
- 前端基础笔记HTML&CSS&JS
- 前端基础之CSS（1）
- CSS+DIV——前端er必备基础
- Web前端开发基础 第一天（Html和CSS）