一、CSS的简介
1. CSS是什么
CSS指层叠样式表,是对HTML进行样式修饰的语言。
层叠:就是层层覆盖叠加,如果不同的CSS样式对统一HTML标签进行修饰,样式有冲突部分应用优先级高的,不冲突的部分共同作用。
样式表:就是CSS属性样式的集合。
2. CSS的作用
1) 修饰HTML,使HTML样式更好看。
2) 提高样式代码的复用性。
3) HTML的内容与样式分离,便于后期维护。
3. CSS的书写
(1) 内嵌样式
内嵌样式就是把CSS的代码嵌入到HTML标签中。
例:<div style=”color:red;font-size : 100px”>这是一个DIV</div>
语法:
(1) 使用style属性将样式嵌入到HTML标签中。
(2) 属性的写法: 属性名 :属性值。
(3) 多个属性之间使用分号;隔开。
*不建议使用这个写法。
(2) 内部样式
在head标签中使用style标签进行CSS的引入。
例:
<styletype=”text/css”>
div{color:red;font-size:100px;}
</style>
语法:
(1)使用style标签进行CSS的引入。
<style type=”text/css”>
</style>
(2) 属性的写法:属性名 :属性值。
(3) 多个属性之间使用分号;隔开。
(3)外部样式
将CSS样式抽取成一个单独CSS文件,谁使用就谁引用。
<linkrel=”stylesheet” type=”text/css” href=”demo1.css” />
语法:
(1) 创建CSS文件,将CSS属性 CSS文件中
(2) 在head中使用link标签进行引入
<linkrel=”stylesheet” type=”text/css” href=”css文件地址”/>
rel:代表要引入的文件与html的关系
type:告知浏览器使用CSS解析器去解析
href:CSS文件的地址
(4) @import方式
<styletype=”text/css”>
@importurl(“CSS地址”);
</style>
link与@import方式的区别
(1) 所有浏览器都支持 link,部分低版本IE不支持import
(2) import方式是等待HTML加载完毕之后再加载
(3) import方式不支持JS的动态修改
二、CSS选择器
1. 基本选择器
(1) 元素选择器
语法:HTML标签名{CSS属性}
示例:
<span> hello css!!!</div>
<style type="text/css">
span{ color : red; font-size : 100px; }
</style>
(2) id选择器(id要唯一)
语法:#id的值{CSS属性}
示例:
<div id="div1">hello css1!!!</div>
<div id ="div2">hello css2!!!</div>
<style type="text/css">
#div1{background-color:red;}
#div{backgroung-color:pink;}
</style>
(3)class选择器
语法:.class的值{css属性}
示例:
<div class="style1">hello css1!!!</div>
<div class="style2">hello css2!!!</div>
<style type="text/css">
.style1{background-color: red;}
.style2{background-color:green;}
****选择器的优先级:id > class > 元素
2. 属性选择器
语法:基本选择器[属性=‘属性值’]{class属性}
示例:
<form action="">
name:<input type="text" /><br>
pass:<input type="password" /><br>
</form>
<style>
<style type="text/css">
input[type="text"]{background:yellow}
input[type="password"]{background-color:pink}
</style>
3. 伪元素选择器
a标签的伪元素选择器
语法:
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}
示例:
<a href='#'> 点击我吧</a>
<style type="text/css">
a:link{color:blue}
a:hover{color:red}
a:active{color:yellow}
a:visited{color:green}
</style>
4. 层级选择器
语法:父级选择器 子级选择器......
示例I:
<div id="d1">
<div class="dd1">
</div>
<div class="dd2">
<span>span1-2</span>
</div>
</div>
<style type="text/css">
#d1 .dd2 span{color:red}
</style>
三、css属性
1. 文字属性
font: 简写塑好型,作用是把所有针对字体的属性设置在一个声明中。
font-size : 大小
font-family : 字体类型
font-style: 定义字体风格
2. 文本属性
color : 颜色
text-decoration : 下划线 (属性值:none underline)
text-algin:对齐方式(属性值:left center right)
letter-spacing: 定义字符间隔
word-spacing: 定义字间隔
3. 背景属性
background-color:背景颜色
bacjground-image:背景图片 (属性值:url("图片地址”)
background-position:图片的起始位置
background-repeat:平铺方式 (属性值: repeat:横向纵向平铺 no-repaet:不平铺 repeat-y:纵向平铺 repeat-x:横向平铺)默认横向纵向平铺
4. 列表属性
list-style-type:列表项前小标志
list-style-image:列表项前的小图片
5. 尺寸属性
width:宽度
heigjt:高度
6. 显示属性
display:(属性值:none:隐藏 block:块级显示 inline:行级显示)
7. 浮动属性
float:(属性值:left right clear:清除浮动)
缺点:(1)影响相邻元素,导致相邻元素不能正常显示
(2)影响父元素,导致父元素不能正常显示
四、CSS盒子模型
CSS框模型(Box Model)规定了元素框处理元素内容、内边框、边框和外边框的方式。
元素框的最里面部分是实际内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
border:
border-width:边框的宽度
border-color: 边框的颜色
border-style:边框的线型
padding:
代表边框内壁与内部元素之间的距离
padding:10px; 代表上下左右都是10px
padding:1px 2px 3px 4px;上下左右
padding:1px 2px 上下 / 左右
padding-top:1px 上
padding-left:1px 左
padding-ringht:1px 右
padding-bottom:1px 下
margin:
代表边框外壁与其它元素之间的距离 (boeder padding margin类似)
附CSS中单位说明