一、css
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
二、css语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明
(1)每条声明由一个属性和一个值组成。属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
(2)CSS声明总是以分号 ; 结束,声明总以大括号 {} 括起来
p {color:red; text-align:center;}
(1) p (选择器,表示给html中p标签添加样式)
(2) color:red; (表示一条声明)
(3) {; ; ; ;} (所有声明)
(3)选择器:
(3.1)id选择器
<div id="para1">
#para1 {
text-align:center;
color:red;
}
(3.2)class选择器
<div class="para1">
.para1 {
text-align:center;
color:red;
}
(3.3 派生选择器)
<ul class="para1">
<li></li>
<li></li>
</ul>
ul li {
text-align:center;
color:red;
}
表示ul下的li的样式
(3.4)属性选择器
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
三、样式表
(1)内部样式表
<head>
<style>
p {color:red;}
body {background:#ffffff}
</style>
</head>
(2)引入外部样式表
浏览器会从文件 *.css 中读到样式声明,并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
(3)内联样式
<p style="color:#ffffff">此段落字体是白色的</p>
(4)多重样式
(4.1 )样式优先级:
(内联样式) > (内部样式)>(外部样式) > (浏览器默认样式)
(4.2)选择器优先级:
(内联样式)>(id选择器)>(伟类)>(属性选择器)>(class选择器)>(元素选择器)>(通用选择器 *)
四、基础css对照表
4.1 css样式目录
----(1)设置背景样式
----(2)设置文本样式
----(3)设置字体样式
----(4)设置超链接样式
----(5)设置列表样式
----(6)设置表格样式
----(7)设置图片样式
五、基础css属性
5.1 背景样式
属性名 | 属性描述 | 属性值 |
---|---|---|
background-color | 背景颜色 | #ff0000、red、rgb(255,0,0) |
background-image | 背景图片 | url(‘bg.jpg’) |
background-repeat | 背景图片重复平铺 | repeat-x(水平方向平铺)、no-repeat(不平铺) repeat-y(竖直方向平铺) |
background-position | 图片起始位置 | left、right、top、center、bottom、百分数(50% 50%)水平和竖直两个方向 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 | scroll(滚动,默认)、fixed(固定)、local(随元素内容滚动) |
body
{
background-image:url('bg.png');
background-repeat:no-repeat;
background-position:right top;
}
/*简写,需要按照顺序*/
body {background:#ffffff url('img_tree.png') no-repeat right top;}
5.2 文本样式
属性名 | 属性描述 | 属性值 |
---|---|---|
color | 文本颜色 | #ff0000、red、rgb(255,0,0) |
direction | 文本方向 | ltr(左到右)、rtl(右到左) |
letter-spacing | 文本字与字的间距 | 具体长度 |
line-height | 行高 | 具体高度、百分数(大多数浏览器的默认行高约为110%至120%) |
text-align | 文本对齐方式 | left、right、center、justify |
text-decoration | 修饰文本 | underline(下划线)、overline(上划线)、line-through(穿过文本) |
text-indent | 设置文本缩进 | 具体数值、百分数 |
text-shadow | 设置文本阴影 | h-shadow(水平阴影位置)、v-shadow(垂直阴影位置)、blur(模糊距离)、color(颜色) |
text-transform | 文本大小写 | capitalize(每个单词大写字母开头)、uppercase(仅有大写字母)、lowercase(仅有小写字母) |
text-shadow: 2px 2px #ff0000; 设置阴影
5.3 字体样式
属性名 | 属性描述 | 属性值 |
---|---|---|
font | 在一个声明中设置所有的字体属性 | |
font-family | 指定文本的字体系列 | |
font-size | 指定文本的字体大小 | |
font-style | 指定文本的字体样式 | italic(斜体)、oblique(倾斜样式) |
font-variant | 以小型大写字体或者正常字体显示文本 | |
font-weight | 指定字体的粗细。 |
font-family:"Times New Roman",Georgia,Serif;
/* <absolute-size>,绝对大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
/* <relative-size>,相对大小值 */
font-size: larger;
font-size: smaller;
/* <length>,长度值 */
font-size: 12px;
font-size: 0.8em;
/* <percentage>,百分比值 */
font-size: 80%;
font-size: inherit;
5.4 链接样式
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
/*text-decoration 属性主要用于删除链接中的下划线*/
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
/*使用背景颜色修饰超链接*/
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
5.5 列表样式
list-style-type:none;
/*无序列表*/
ul.a {list-style-type:circle;} /*无序,空心圆“○”*/
ul.b {list-style-type:disc;} /*无序,实心圆“●”*/
ul.c {list-style-type:square;}/*无序,实心正方形“■”*/
/*有序列表*/
ol.d {list-style-type:armenian;} /*有序,传统的亚美尼亚数字*/
ol.e {list-style-type:cjk-ideographic;} /*有序,浅白的表意数字*/
ol.f {list-style-type:decimal;} /*有序,数字1、2、3*/
ol.g {list-style-type:decimal-leading-zero;} /*有序,数字01、02、03*/
ol.h {list-style-type:georgian;} /*有序,传统的乔治数字*/
ol.i {list-style-type:hebrew;} /*有序,传统的希伯莱数字*/
ol.j {list-style-type:hiragana;} /*有序,日文平假名字符*/
ol.k {list-style-type:hiragana-iroha;} /*有序,日文平假名序号*/
ol.l {list-style-type:katakana;} /*有序,日文片假名字符*/
ol.m {list-style-type:katakana-iroha;} /*有序,日文片假名序号*/
ol.n {list-style-type:lower-alpha;} /*有序,小写英文字母a、b、c……*/
ol.o {list-style-type:lower-greek;} /*有序,基本的希腊小写字母*/
ol.p {list-style-type:lower-latin;} /*有序,小写拉丁字母*/
ol.q {list-style-type:lower-roman;} /*有序,小写罗马数字i、ii、iii……*/
ol.r {list-style-type:upper-alpha;} /*有序,大写英文字母A、B、C……
*/
ol.s {list-style-type:upper-latin;} /*有序,大写拉丁字母*/
ol.t {list-style-type:upper-roman;} /*有序,大写罗马数字I、II、III……*/
ol.u {list-style-type:none;}/*不使用项目符号*/
ol.v {list-style-type:inherit;} /*继承*/
5.6 表格样式
属性名 | 属性描述 | 属性值 |
---|---|---|
border | 表格边框属性 | |
border-collapse | 设置是否将表格边框折叠为单一边框 | |
text-align | 文本水平对齐 | left、right、center |
vertical-align | 文本竖直对齐 | top、bottom、center |
table
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
td
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
5.7 图片样式
5.7.1 设置width
、height
<div class="responsive">
<div class="img">
<a target="_blank" href="#">
<img src="demo1.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div>
5.7.2 设置图片不透明度opacity
/* Opacity属性值从0.0 - 1.0 值越小,使得元素更加透明。*/
img
{
opacity:0.4;
filter:alpha(opacity=40); /* IE8 及其更早版本 */
}
/*模糊图片,鼠标悬停变清晰效果*/
img
{
opacity:0.4;
filter:alpha(opacity=40); /* IE8 及其更早版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* IE8 及其更早版本 */
}
六、css常用单位
6.1 相对长度
相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。
6.2 绝对长度
绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。
特别鸣谢菜鸟教程所提供的内容支持