CSS介绍
CSS 指层叠样式表 (Cascading Style Sheets)定义如何显示控制 HTML元素,从而实现美化HTML网页。
优势:为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。
CSS基本语法及引入方式
基本语法
格式: 选择器{属性:值;属性:值;属性:值;…}
例如:
CSS页面三种引入方式
内联式:通过标签的style属性,在标签上直接写样式。在上一片文章中的所有HTML代码中都是通过内联式引入CSS的。如下:
嵌入式:通过style标签(写在head标签里面),在网页上创建嵌入的样式表。
下面就写一个通过嵌入式引入CSS的简单代码吧,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
CSS样式的声明: 写在head标签里面
div是最简单的标签选择器
-->
<style type="text/css">
div {
border: 1px solid red;
width: 700px;
height: 200px
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
上面代码通过引入CSS可以对列表进行简单的装饰。效果如下:
外联式:通过link标签,链接到外部样式表到页面中。
格式如下:
比如上一个代码,把head标签中的关于CSS的代码删掉,拷贝到一个新建的.css文件中去,然后在原html文件的head标签中添加link标签,把.css文件加到href属性里面,就完成了外联式的引入,实现效果和上图一样。
常用CSS样式
CSS可使用长度单位:
单位 | 单位说明 | 范例 |
---|---|---|
pt | Point,就像是Word里面的Point一样大小 | font-size:10pt |
px | Pixels,依您屏幕分辨率而决定大小 | font-size:10px |
pc | Pica,6个Pica是一英吋 | font-size:10pc |
mm | 公厘,这个设定值完全不会因为其它设定而改变 | font-size:10mm |
cm | 公分,不会因为使用者设定而改变 | font-size:10cm |
% | 百分比,大部分是指所在位置宽度或者长度百分比 | font-size:10% |
CSS可用颜色表示方式:
表示方式 | 表示方式说明 | 范例 |
---|---|---|
#rrggbb | 可以用Windows色彩选择工具找到 | color:#feefc7 |
rgb(#,#,#) | 用数字来表示红色蓝色以及绿色的混合,也可以用Windows色彩选择工具找 | color:rgb(135,255,124) |
rgb(%,%,%) | 用百分比来代表红色蓝色以及绿色的强度来混合颜色 | color:rgb(70%,35%,41%) |
颜色名称 | 用颜色的名称来指定颜色 | color:brown |
CSS可用背景值:
名称 | 说明 | 可能值 | 范例 |
---|---|---|---|
background | 背景 | 下面的背景设定值皆适用 | background:fixed |
background-attachment | 背景图性是否固定 | fixed, scroll | background-attachment:fixed |
background-color | 背景颜色 | 颜色 transparent(透空) | backgroun-color:yellow |
background-image | 背景图片 | none(无背景图) url(****)(图片位置) | background-image:url(test.jpg) |
background-position | 背景图位置 | 水平 垂直 | background-position:135 159 |
background-repeat | 背景是否重复 | repeat(重复) repeat-x(水平重复) repeat-y(垂直重复) no-repeat(不重复) | background-repeat:repeat |
CSS可用属性值:
名称 | 说明 | 可能值 | 范例 |
---|---|---|---|
visibility | 显示或是隐藏 | inherit(父组件决定) hidden(隐藏) visible(显示) | visibility:hidden |
width | 宽度 | auto(自动决定) 数字 | width:135 |
height | 高度 | auto(自动决定) 数字 | height:100 |
z-index | Z轴高度(立体,是否在另一个组件之上) | auto(自动决定) 数字 | z-index:135 |
position | 定位方式 | absolute(绝对寻址-依窗口坐标,原点为父窗口左上角) relative(相对定位-以一般网页排列[right.center.left]后再根据坐标定位,原点为定位后的位置) static(静态定位-以一般网页排列) | position:absolute |
top(对象的position属性须为absolute或relative) | 对象的Y坐标(原点根据postion属性有所不同) | 数字 | |
left(对象的position属性须为absolute或relative) | 对象的X坐标(原点根据postion属性有所不同) | 数字 |
CSS可用文字设定值:
名称 | 说明 | 可能值 | 范例 |
---|---|---|---|
font | 文字设定 | 以下所有皆可使用 | font:arial |
font-family | 字体 | 字体名称 | font-family:arial |
font-size | 字体大小 | 百分比或是数字(单位) | font-size:12px |
font-style | 字型样式 | normal(普通) italic(斜体) oblique(斜体) | font-style:italic |
font-variant | 字型特别样式 | normal(普通) small-caps(大小英文字母) | font-variant:small-caps |
font-weight | 字型粗细 | normal(普通) bold(粗体) bolder(超粗体) lighter(细体) 数字(400=normal 700=bold ) | font-weight:bolder |
letter-spacing | 字符相距 | normal(普通) 数字(预设为0) | letter-spacing:5 |
text-align | 字符对齐 | left(左边) right(右边) center(中间) justify(左右平分) | text-align:justify |
text-decoration | 字符样式 | none(普通) underline(加底线) no-underline(不加底线) blink(闪烁) no-blink(不闪烁) line-through(加删除线) no-line-through(不加删除线) overline(加顶线) no-overline(不加顶线) | text-decoration:underline |
CSS可用表格设定值 [框线位置:(上-top.下-bottom.左-left.右-right)]
名称 | 说明 | 可能值 | 范例 |
---|---|---|---|
border | 表格边框设定 | 以下所有皆可使用 | border:green |
border-color border-(框线位置)-color | 边框颜色 | 任何颜色表示方法 | border-color:blue |
border-style border-(框线位置)-style | 边框样式 | none(无边框) dotted(点线) dashed(虚线) solid(实线) double(双线) groove(立体凹线) ridge(立体凸线) inset(立体嵌入线) outset(立体隆起线) | border-style:dotted |
border-width border-(框线位置)-width | 边框宽度 | 数字 | border-width:5 |
padding | 边框补白 | 数字 | padding:5 |
基本选择器
1.标签选择器
标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中。举例:
2.id选择器
通过id名来选择元素(id前面加一个#,表示id选择器),元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。举例:
3.类选择器
通过类名来选择元素(类前面加一个. 表示类选择器),一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。举例:
4.层级选择器
主要应用在选择父元素下的子元素,或者子元素下面的子元素(直接用空格对它们进行连接),可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。举例:
5.组选择器
多个选择器,如果有同样的样式设置,可以使用组选择器(用,进行连接组合)。举例:
6.伪类及伪元素选择器
常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态,伪元素选择器有before和after,它们可以通过样式在元素中相应位置插入内容。举例:
盒子模型
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。如下图:
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
下面举个例子,计算盒子的总宽度:
盒子总宽度:
300px (宽)+ 50px (左 + 右填充)+ 50px (左 + 右边框)+ 50px (左 + 右边距)
= 450px
用代码实现一个类似于上面的盒子模型,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
/*设置内边距为25px*/
padding: 25px;
/*设置外边距*/
margin: 25px auto;
/*设置边框乱度为25px*/
border: 25px skyblue solid;
/*指定盒子的宽度*/
width: 300px;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div class="box">
盒子模型
</div>
</body>
</html>
可以总结如下:
总元素的宽度=宽度+左填充+右填充+左边框 +右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框 +下边框+上边距+下边距
盒子模型案例
利用盒子模型,实现一个电影宣传图和其简介的页面,并且设计的美观一点,实现效果图如下:
下面就是代码的编写了:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box, img{
width: 232px;
}
.box{
border: 2px gray solid;
}
.detail{
font-size: 12px;
/*设置内边距为5PX*/
padding: 8px;
}
</style>
</head>
<body>
<div class="box">
<div class="taobao-image">
<img src="img/movie.jpg">
</div>
<div class="detail">
天地灵气孕育出一颗能量巨大的混元珠,元始天尊将混元珠提炼成灵珠和魔丸,灵珠投胎为人,助周伐纣时可堪大用;而魔丸则会诞出魔王,为祸人间。元始天尊启动了天劫咒语,3年后天雷将会降临,摧毁魔丸。
</div>
</div>
</body>
</html>
CSS浮动
什么是 CSS Float(浮动)?
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
Float(浮动),往往是用于图像,但它在布局时一样非常有用。
元素怎样浮动?
- 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
- 一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 浮动元素之后的元素将围绕它。
- 浮动元素之前的元素将不会受到影响。
下面用图的方式来说明元素是怎样浮动的:
如果想让某一元素取消浮动,可以通过clear属性终止浮动,后面加终止浮动的方向。
浮动案例
我们针对上面的盒子模型的案例进行修改,实现元素浮动以及终止浮动的样式,最终实现效果如下:
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box, img {
width: 126px;
}
.box {
/*指定边框的宽度, 样式, 颜色 */
border: 1px gray solid;
/*让所有的div标签向左浮动, 排列在同一行*/
float: left;
/*设置外边距*/
margin: 5px;
padding-bottom: 10px;
}
.detail {
font-size: 10px;
/*设置内边距为5PX*/
padding: 8px;
height: 20px;
/*内容会被修剪,并且其余内容是不可见的*/
/*overflow: hidden;*/
/*如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。*/
overflow: auto;
}
.clear {
/*指定段落的左侧或右侧不允许浮动的元素:float:right; float:both;*/
clear: left;
}
</style>
</head>
<body>
<div class="box">
<div class="taobao-image">
<img src="img/movie.jpg">
</div>
<div class="detail">
天地灵气孕育出一颗能量巨大的混元珠,元始天尊将混元珠提炼成灵珠和魔丸,灵珠投胎为人,助周伐纣时可堪大用;而魔丸则会诞出魔王,为祸人间。元始天尊启动了天劫咒语,3年后天雷将会降临,摧毁魔丸。
</div>
</div>
<div class="box">
<div class="taobao-image">
<img src="img/movie.jpg">
</div>
<div class="detail">
天地灵气孕育出一颗能量巨大的混元珠,元始天尊将混元珠提炼成灵珠和魔丸,灵珠投胎为人,助周伐纣时可堪大用;
而魔丸则会诞出魔王,为祸人间。元始天尊启动了天劫咒语,3年后天雷将会降临,摧毁魔丸。
</div>
</div>
<div class="box">
<div class="taobao-image">
<img src="img/movie.jpg">
</div>
<div class="detail">
天地灵气孕育出一颗能量巨大的混元珠,元始天尊将混元珠提炼成灵珠和魔丸,灵珠投胎为人,助周伐纣时可堪大用;而魔丸则会诞出魔王,为祸人间。元始天尊启动了天劫咒语,3年后天雷将会降临,摧毁魔丸。
</div>
</div>
<div class="box">
<div class="taobao-image">
<img src="img/movie.jpg">
</div>
<div class="detail">
天地灵气孕育出一颗能量巨大的混元珠,元始天尊将混元珠提炼成灵珠和魔丸,灵珠投胎为人,助周伐纣时可堪大用;而魔丸则会诞出魔王,为祸人间。元始天尊启动了天劫咒语,3年后天雷将会降临,摧毁魔丸。
</div>
</div>
<div class="box clear">
<div class="taobao-image">
<img src="img/movie.jpg">
</div>
<div class="detail">
天地灵气孕育出一颗能量巨大的混元珠,元始天尊将混元珠提炼成灵珠和魔丸,灵珠投胎为人,助周伐纣时可堪大用;而魔丸则会诞出魔王,为祸人间。元始天尊启动了天劫咒语,3年后天雷将会降临,摧毁魔丸。
</div>
</div>
<div class="box">
<div class="taobao-image">
<img src="img/movie.jpg">
</div>
<div class="detail">
天地灵气孕育出一颗能量巨大的混元珠,元始天尊将混元珠提炼成灵珠和魔丸,灵珠投胎为人,助周伐纣时可堪大用;而魔丸则会诞出魔王,为祸人间。元始天尊启动了天劫咒语,3年后天雷将会降临,摧毁魔丸。
</div>
</div>
</body>
</html>