CSS 小结

原创 于 2017-08-31 22:09:04 发布 · 400 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文详细介绍了CSS的基本概念、语法及各种样式属性的应用方法，包括文本、背景、边框、盒模型等，同时还讲解了元素布局与定位技巧。

CSS 小结

CSS(Cascading Style Sheets)，层叠样式表，用来定义 HTML 中的元素的显示方式。CSS 从 HTML 4.0 开始引入，实现了 HTML 中内容与内容显示方式的分离，大大提高了工作效率。通常，我们将样式表单独存储在 CSS 文件中，然后通过链接的形式引入 HTML 文件中。

CSS 语法

语法规则

CSS 的语法规则主要由两部分组成，选择器和属性键值对，形如：h1 {color:red;font-size:20px;}

选择器通常有3种：元素名称、#id、.class，但是，可以通过组合的方式灵活使用，如 元素名称.class 则是选择了某一种元素的所有相同的类名的元素，#id.class 则是选择了某一个ID的所有相同类名的元素，使用方法如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title> 
<style>
p {background-color:yellow;}
#para {margin-left:20px;}
.center {color:red;}
p.center {text-align:center;}
#para.green {background-color:green;}
</style>
</head>

<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
<p id="para">这个段落向右侧移动20px</p>
<p id="para" class="green">背景色为绿色</p>
</body>
</html>

另外，上面5种选择器的形式，可以通过使用 “,” 隔开，从而将一样的样式写在一起，以减少代码量。使用空格将它们分隔，则表示选择器的嵌套，即在前一个选择器选择出的元素中筛选元素，如下：

<style>
h1,p,#test.className
{
color:green;
}
div div #test.className 
{
    background-color:yellow;    
}
</style>

创建方式

  1. 外部样式表，将样式表单独保存在一个 CSS 文件中，而后在 HTML 文档中使用 <link> 标签进行引用，当浏览器读取 CSS 文件中的样式表后，变化使用其格式化 HTML 文档的内容。对于多个 HTML 文档需要使用同一种样式时，可采取这种方法，引用方式如下：

    <head>
<link rel="stylesheet" type="text/css" href="testStyle.css">
</head>

  2. 内部样式表，对于单个 HTML 文档使用特殊样式时，可以在 HTML 文档中使用 <style> 标签进行样式表的定义，格式如下：

    <head>
<style>
hr {color:sienna;}
p {margin-left:10px;}
body {background-image:url("images/test.png");}
</style>
</head>

  3. 内联样式，对于某个样式应用于一个单一的元素，则可以定义该元素标签的 style 属性来定义其特殊样式，如下：

    <p style="background-color:green;margin-left:20px">段落</p>

    当这三种样式重叠时，即多种样式应用于同一个元素时，浏览器会将解析得到的样式覆盖已经存在的样式。

基本样式

背景
样式属性属性值含义样例
background-color颜色值，如白色：white、#FFF、#FFFFFF、rgb(255,2555,255)、rgba(255,255,255,1)设置元素背景色body{background-color:white;}
background-image图片路径，如：test.png设置背景图片body{background-image:url(‘test.png’);}
background-repeatrepeat、repeat-x、repeat-y、no-repeat、inherit设置图片的平铺方向或不平铺body{background-image:url(‘test.png’);background-repeat:no-repeat;}
background-imageleft right center top bottom 两两组合，x% y% 使用百分比进行设置设置背景图片的起始位置body{background-image:url(‘test.png’);background-position:right top;}
background-attachmentfixed图片固定，不随界面滚动而滚动body{background-image:url(‘test.png’);background-attachment:fixed;}
文本
样式属性属性值含义样例
colorwhite、#FFFFFF、rgb(255,255,255)设置文本的颜色p{color:blue;}
text-alignleft、right、center、justify设置文本的对齐方式p{text-align:left;}
text-decorationnone、overline、line-through、underline设置文本的删除线p{text-decoration:none;}
text-transformuppercase、lowercase、capitalize设置文本字母大小写p{text-transform:capitalize;}
text-indent像素值、相对父元素宽度的百分比设置文本缩进长度p {text-indent:50px;}
letter-spacing像素值、可以为负设置文本字符之间的间距h1 {letter-spacing:20px;}
line-height像素值、相对文本字体尺寸的倍数或百分比设置文本的行间距p{line-height:70%;}
directionltr、rtl设置文本的方向p{direction:rtl;unicode-bidi:bidi-override;}
unicode-bidinormal、embed、bidi-override、inherit与 direction 属性一起使用来设置文本是否重写p{direction:rtl;unicode-bidi:bidi-override;}
word-spacing像素值设置单词的间距，对中文无效p{word-spacing:30px;}
white-spacenormal、pre、nowrap、pre-wrap、pre-line、inherit设置空白及换行是否保留p{white-space:pre;}
text-shadow水平阴影偏移量、垂直阴影偏移量、模糊的距离、阴影的颜色，后两个参数可选设置文本的阴影p{text-shadow:2px 2px 8px #FF0000;}
字体
样式属性属性值含义样例
font-family“Times New Roman”、Arial、”宋体”设置文本的字体系列p{font-family:”Times New Roman”, Times, serif;}
font-stylenormal、italic、oblique设置文本的字体样式p{font-style:italic;}
font-size16px、1em、110%设置文本的字体大小p{font-size:0.5em;}
font-variantnormal、small-caps将文本小写字母转为大写，但其字母尺寸较小p{font-variant:small-caps;}
font-weightnormal、bold、bolder、lighter、100～900设置文本字体粗细，400=normal，700=boldp{font-weight:800;}
链接
链接状态含义样例
a:link未访问过的链接a:link{color:#789;}
a:visited用户已经访问过的链接a:visited{text-decoration:none;}
a:hover鼠标放在链接上时a:hover{font-size:150%;}
a:active点击链接时a:active{background-color:red;}

注意设置这些状态时，顺序不能改变。

列表
样式属性属性值含义样例
list-style-typecircle、square、upper-roman、lower-alpha设置列表项标记ul{list-style-type:circle;}
list-style-image图片路径设置列表标记为图片ol{list-style-image: url(‘test.gif’);}
list-style-positionoutside、inside设置列表项位置ul{list-style-position:inside;}

盒模型

在 HTML 文档中，所有的元素都可以看作一个盒子。在 CSS 中，盒模型（box model）用来设计与布局。
其包括下面4个部分：

  • 外边距（Margin），盒模型边框外的区域，是透明的。
  • 边框（Border），围绕内边距与内容的边界线。
  • 内边距（Padding），内容与边框之间的区域，是透明的。
  • 内容（Content），盒模型的内容，显示元素的文本或图像。

在 HTML 文档中，要将元素的宽度与高度设置正确，应按照盒模型进行计算并设置，如设置一个 div 元素的宽度为300px，设置如下：

div {
    width:250px;
    padding:10px;
    border:5px;
    margin:10px;
}
边框
样式属性属性值含义样例
border-stylenone、dotted、dashed、solid、double、groove、ridge、inset、outset设置边框样式p{border-style:solid;}
border-width像素值、thin、medium、thick设置边框宽度p{border-style:dotted;border-width:10px;}
border-colorred、rgb(255,0,0)、#FF0000设置边框的颜色p{border-style:solid;border-color:red;}
border样式、颜色、宽度设置边框的属性p{border:yellow 10px dotted;}
border-bottom、border-bottom-color、border-bottom-width、border-bottom-style样式、颜色、宽度设置下边框的属性p{border-bottom:thin red double;} div{border-bottom-color:transparent;}
border-left、border-left-color、border-left-width、border-left-style样式、颜色、宽度设置下边框的属性p{border-left:thin red double;} div{border-left-color:transparent;}
border-right、border-right-color、border-right-width、border-right-style样式、颜色、宽度设置下边框的属性p{border-right:thin red double;} div{border-right-color:transparent;}
border-top、border-top-color、border-top-width、border-top-style样式、颜色、宽度设置下边框的属性p{border-top:thin red double;} div{border-top-color:transparent;}

对于 border-style、border-color、border-width，可以接受1～4个值。1个值时，定义所有边框的属性；2个值时，第一个值定义上下边框的属性，第二个值定义左右边框的属性；3个值时，第一个定义上边框的属性，第二个定义左右边框的属性，第三个定义下边框的属性；4个值时，从上边框开始，顺时针方向，分别定义4个边框的属性。

轮廓
样式属性属性值含义样例
outline-stylenone、dashed、solid、double、groove、ridge、inset、outset、inherit设置轮廓的样式p{outline-style:double;}
outline-colorred、rgb(255,0,0)、#F00、invert设置轮廓的颜色p{border:2px solid yellow; outline-style:solid; outline-color:red;}
outline-width像素值、thin、medium、thick设置轮廓的宽度p{border-style:dotted; outline-style:solid; outline-width:10px;}
outline样式、颜色、宽度设置轮廓属性的简写形式p{border-style:dotted; outline:solid red 10px;}

轮廓是围绕在边框外的线，而不是外边距，但是轮廓不属于元素

外边距
样式属性属性值含义样例
margin10px、2cm、25%、auto设置元素的外边距，可以有1～4个值，各个值的含义参见边框p{margin:10px 15px 23px 10px;}
margin-left、margin-right、margin-top、margin-bottom像素值设置元素指定的外边距p{margin-top:10px;}
内填充
样式属性属性值含义样例
padding10px、25%设置元素的填充，可以有1～4个值，各个值的含义参见边框p{padding:10px 15px 23px 10px;}
padding-left、padding-right、padding-top、padding-bottom像素值设置元素指定的外边距p{padding-left:10px;}

元素尺寸

样式属性属性值含义样例
height像素值、百分比设置元素高度p{height:400px; width:100%;}
width像素值、百分比设置元素宽度p{height:400px; width:100%;}
max-height像素值、百分比设置元素最大高度p{max-height:500px; min-height:100px;}
min-height像素值、百分比设置元素最小高度p{max-height:500px; min-height:100px;}
max-width像素值、百分比设置元素最大宽度p{max-width:500px; min-width:100px;}
min-width像素值、百分比设置元素最小宽度p{max-width:500px; min-width:100px;}

元素布局与隐藏

样式属性属性值含义样例
displaynone、block、inline、list-item、table等设置元素布局样式，是块、内联、列表、表或者其他样式p{display:block;}
visibilityvisible、hidden、collapse、inherit设置元素是否可见p{visibility:hidden;}

display:none; 与 visibility:hidden; 的区别在于前者并不会布局在页面上，而后者只是不可见，其仍然在页面上占用空间，而影响着页面的布局。

元素的定位

元素可以通过设置属性 position 并且配合 top、left、right、bottom 进行元素的定位，其可取的属性值如下：

属性值含义样例
static默认值，按元素流进行定位p{position:static;}
relative相对其在父元素或 html 元素中的正常位置h2{position:relative;left:-20px;}
fixed相对与浏览器的窗口是固定的p{position:fixed;top:20px;left:20px;}
absolute绝对定位，相对于父元素或 html 元素p{position:absolute;left:100px;top:10px;}

另外，属性 position 还可以和其他属性一起使用，如下：

样式属性属性值含义样例
z-index-1、0、1定位与文档流无关，元素可以重叠，所以可以设置其显示的前后顺序img{position:absolute;left:0px;top:0px;z-index:-1;}
cliprect(10px,10px,20px,0px);设置裁剪范围img{position:absolute; clip:rect(10px,10px,20px,0px);}
overflowvisible、hidden、scroll、auto、inherit设置内容超出元素范围时的处理方式div{position:absolute;width:100px; height:100px; overflow:scroll;}

鼠标样式

通过设置样式属性 cursor 的值，可以使鼠标在移动到不同的元素上时，显示不同的图标，其可取的值如下：

属性值含义
default默认光标，通常为一个箭头
auto浏览器默认的光标
crosshair十字形状的光标
point手形状的光标，通常表示当前元素为超链接
move十字箭头形状的光标，通常表示当前元素可以移动
textI形状的光标，通常表示文本
wait、progress圆圈或者沙漏形状的光标，通常表示等待
help问号形状的光标，通常表示帮助
e-resize、ne-resize箭头形状的光标，通常表示可以向某个方向移动

浮动

浏览器在解析 HTML 文档，生成页面的过程中，会按照文档中的元素流进行布局，使用 float 样式属性可以改变布局，使其他元素围绕着浮动元素，float 的值有 none、left、right。若是元素不允许周围有浮动元素，则可设置样式属性 clear 的值为 both、left、right 表示两侧、左侧、右侧不允许有浮动元素，其默认值为 none ，表示周围允许有浮动元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>浮动</title> 
<style>
img {float:left;}
p.clear {clear:both;}
</style>
</head>
<body>

<img src="test.png" width="100" height="100" />
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>

</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值