您的位置：首页 > Web前端 > CSS

CSS简单使用

2016-05-15 20:37 591 查看

CSS简单使用

标签 ： 前端技术


CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增强网页的显示效果. 即:CSS将网页内容与显示样式分离,增强了显示功能.



CSS与HTML结合

CSS与HTML结合的方式有四种:

style属性:

在每个HTML标签上均有一个
style
属性, 将样式直接写入标签:

<div style="background-color:red;color:green;">


<style/>
标签:

使用HTML的
<style/>
标签,将CSS代码在
<head/>
内:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IFS</title>
<style type="text/css">
div {
background-color: coral;
color: crimson;
}
</style>
</head>


@import
引入:

在
<style/>
内用
@import "CSS-path";
引入CSS文件:

<style type="text/css">
@import "style.css";
</style>



注意: 这种方式的浏览器兼容性较差, 不推荐.



<link/>
引入:

使用头标签
<link/>
引入CSS是最常用的结合方式:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IFS</title>
<link rel="stylesheet" href="style.css">
</head>



注: 结合优先级:

根据书写顺序<由上到下,由外到内>,优先级<由低到高>,即:后加载优先级更高.



代码规范

选择器名称 { 属性名：属性值；属性名：属性值；…….}


属性与属性间用
;
隔开;

属性名与值间用
:
连接;

一个属性的多个值用空格
隔开;

CSS选择器

选择器是CSS的核心,从最初的元素/class/id选择器,演进到伪元素/伪类,以及CSS3中提供的更丰富的选择器… 定位页面上的任意元素开始变得愈发简单.



基本选择器
CSS提供的基本选择器有三种:

标签选择器:

使用标签名作为选择对象:

div {
background-color: aquamarine;
color: coral;
}


class选择器:

可为每个HTML标签添加
class
属性以标识该元素:

<div class="form-class">
...
</div>


.form-class {
background-color: beige;
color: crimson;
}



注: class可以选用多个style:

<p class="div-class div-width-class">百度/阿里/腾讯</p>




ID选择器

可为每个HTML标签添加
id
属性以标识该元素:

<dl id="dl-id">
<dt>Head</dt>
<dd>Sub</dd>
</dl>


#dl-id {
background-color: coral;
color: crimson;
}



注:基本选择器优先级:

style属性 > ID选择器 > class选择器 > 标签选择器



扩展选择器
关联选择器:

<div><p>关联选择器</p></div>
<p>不关联</p>


HTML代码如上, 可以仅设置
<div><p>
元素内的样式而忽略单
<p>
元素内样式:

div p{
color: crimson;
}


组合选择器:

组合选择器可将不同的标签设置成相同的样式:

div, p {
color: darkblue;
}


伪元素选择器

伪元素选择器是CSS中已经提供一些样式,可直接引用,如超链接状态:

原始状态鼠标悬停点击点击之后
:link:hover:active:visited
<a href="http://www.taobao.com" target="_blank">淘宝</a>


/* 初始状态 */
a:link {
background-color: blueviolet;
}

/* 悬停 */
a:hover {
background-color: aqua;
}

/* 点击 */
a:active {
background-color: crimson;
}

/*点击之后*/
a:visited {
background-color: yellowgreen;
}



注意: 伪元素选择器浏览器兼容性较差.



CSS盒子模型

Box Model:盒子模型(又叫框模型),Box Model规定了元素框处理元素内容(element content)、内边距(padding)、边框(border)和外边距(margin)的方式.在HTML文档中,每个元素（element）都有盒子模型,所以在Web世界中(特别是页面布局中),Box Model无处不在:



注意在进行布局前需要将数据封装到一块
DIV
区域内.



边框 border
border[-*] : border-width || border-style || border-color


边框描述
border统一设置
border-top上
border-bottom下
border-left左
border-right右
<div class="box-div-class">
百度/阿里/腾讯
</div>
<div class="box-div-class box-right-class">
百度/阿里/腾讯
</div>


<style type="text/css">
.box-div-class {
width: 400px;
height: 300px;
/*盒子模型*/
border: 5px solid brown;
}

.box-right-class {
border-right: 3px dashed green;
}
</style>


内边距 padding
padding[-*] : length


同
border
,使用
padding
可以统一设置,也可上下左右分别设置:

.box-padding-class {
padding-left: 50px;
}



内边距padding又翻译成补白.



外边距 margin
margin[-*] : auto | length


同
border
,使用
margin
可以统一设置,也可上下左右分别设置:

.box-margin-class {
margin-top: 50px;
}



外边距margin又翻译成边界.



CSS布局
布局漂浮
float : none | left | right


属性作用
left文本流向对象的右边
right文本流向对象的左边
.float-left-class{
float: left;
}



注意: 布局漂浮浏览器兼容性较差,不推荐使用.



布局定位
position : static | absolute | relative


属性说明
static默认值,无特殊定位,对象遵循HTML定位规则
absolute将对象从文档流中拖出: 可以使用
left
/
right
/
top
/
bottom
等属性相对于其最接近的一个具有定位设置的父对象进行绝对定位,如果不存在这样的父对象,则依据
body
对象,而其层叠通过
z-index
属性定义
relative对象不可层叠(不会把对象从文档流中拖出),与
absolute
一样可以使用
left
/
right
/
top
/
bottom
数据进行相对定位.
absolute

.position-class{
position: absolute;
left: 50px;
top: 50px;
}


relative

.position-class{
position: relative;
left: 50px;
top: 50px;
}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航