CSS
CSS：Cascading Style Sheet 层叠样式表，在HTML的运用中起到内容和表现的分离的作用，将HTML中需要表现的东西抽离出来。
一、在HTML中嵌入CSS样式的方法：
1.行内样式：
<teg stye ="..."></teg>
2.内部样式：
<head>
...
<style>
...
</style>
</head>
3.外部样式（一般的HTML中多用这个）
创建独立的CSS文件xxx.css与HTML页面同名
<head>
<link rel=”stylesheet” type=”text/css” href=”path”/>
</head>
二、选择器
说到CSS就要介绍一下，它最为重要的一个东西，选择器，这是HTML关联CSS的一个关键。
常用的选择器：
-
基础选择器
ID选择器 #name{…} name必须具有唯一性 -
class选择器
.name{…} 重用，组合用 -
tag选择器
tagname{…} (teg必须为标签名)同名标签自动响应 -
行为伪类选择器
(1).悬浮伪类：selector:hover{…} 鼠标进入
(2).点击伪类：selector:active{…} 鼠标左键单击
(3).结构伪类
前置伪类：selector::before{…}
后.置伪类：selector::after{…}
三、样式
CSS另一个重要的知识，表现形式一般为
**key:value；**下面介绍一下常用的样式。
- 文字样式
(1)类型：font-style：italic；
(2)粗细：font-weight：bold；
(3)大小：font-size：int px；(int为自定义的整 数，下同)
(4)字族：font-family：arial，“宋体”；(先写英文字体，再写中文字体，顺序不能变)
(5)文字的复合样式使用：
font：int px/1.2 arial，“宋体”；(1.2是1.2倍行距 ) - 文本样式
(1) 颜色：color:rag(0-255,0-255,0-255)/#000000~#ffffff;transparent(透明色)注意：(raga(0-255,0-255,0-255,a)在这里a是指透明度是在0至1之间的小数)
(2)行距：line-height:int px/1.2em;
(3)字符间距：letter-spacing:int px；
(4)首行缩进：text-indent:2em/int px;
(5)文本装饰：
text-decoration:none//underline;
(无装饰/下划线)
(6)文本对齐：
text-align:left/center/right/justify;
(左对齐/居中/右对齐/两端对齐)；
(7)文本溢出：
text-overflow:ellipsis;
(将溢出的部分在盒子内省略显示)
(8)文本换行：
white-space:wrap/nowrap；
(允许换行/不换行)
(9)文本选择：user-select:none/all;
(不允许文本被选择/允许) - 列表样式
(1)列表图标：
list-style-type:none;
(2)列表图片：
list-style-image:url(…/ima gs/xxx.xxx);
(3)列表图片位置：
list-style-position:outside/inside; - 盒子里的样式
(1)宽：width:int px;
(2)高：height:int px;
(3)边框样式：border；
边框样式有些特别，border后面可以通过(top,right,bottom,left)和color，style属性，的组合来实现很多种边框样式
主要形式为：border-top-color；border-top-style；
特别的：
**border-radius:int px;**边框四角的趋向圆角的。
box-shadow:int px int px int px color;
边框的阴影(左右偏移量，上下偏移量，阴影颜色)
(4)内边距：**padding:int px;**嵌套用外盒子的内边距
(5)外边距：**margin:int px；**并列用外边距 - 背景样式
(1)背景颜色
background-color:…；
(2)背景图片
background-imge:…;
(3)背景位置
background-position:…;
相对位置：
水平：left/cent/right
垂直：top/center/bottom
绝对位置：
水平：int px:
垂直：int px;
(4)图片平铺方式
background-repeat:
no-repeat 不平铺
repeat-x 横向平铺
repeat-y 纵向平铺
repeat 双向平铺（默认）
(5)背景大小
background-size:
相对大小：cover(填满窗口)
绝对大小：width(px) height(px)
扫一扫
5073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
