CSS 指的是层叠样式表(Cascading StyleSheet),在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制,本文对 css 一些基本内容及常用功能进行一下总结,总结的内容主要是来自实验楼的 CSS 速成教程 ,这篇文章会实时更新,后续如果遇到什么好的有用功能,也会更新到这篇文章中。
css 基础语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
selector { declaration1; declaration2; ... declarationN;}
选择器通常是需要改变的 HTML 元素,每条声明都由一个属性和一个值组成,每个属性都有一个值,属性和值被冒号分开。
h1{ color:red; font-size:14px;}
css 基本样式
介绍 css 的一些基本样式,这些都是 css 中一些常用的设置。
背景
css 是允许使用纯色作为背景,也允许使用背景图像实现一些相当复杂的效果。
属性 | 描述 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 |
background-color | 设置元素的背景颜色 |
background-image | 把图片设置为背景 |
background-position | 设置背景图片的起始位置 |
background-repeat | 设置背景图片是否及如何重复,其中, no-repeat :表示不能重复, repeat :可重复(默认值), repeat-x :表示 x 轴重复, repeat-y :表示 y 轴重 |
background-size | 规定背景图片的尺寸 |
background-origin | 规定背景图片的定位区域 |
background-clip | 规定背景的绘制区域 |
举个例子,如下所示
body{ background-color: red; background-image: url('hha.jpg'); background-repeat: no-repeat; background-position: center top; background-attachment: fixed; background-size:100px 100px;}p{ width: 150px; padding: 10px; background-color: #0014ff;}
html> head> metacharset='UTF-8'> title>title> linkrel='stylesheet'href='style.css'type='text/css'> head> body> p>matt's blogp> body>html>
效果如下下图所示:
文本
css 文本可定义文本的外观,通过文本的属性,可以改变文本的颜色、字符间距、对齐方式等等。
属性 | 描述 |
color | 文本颜色 |
direction | 文本方向 |
line-height | 行高 |
letter-spacing | 字符间距 |
text-align | 对齐元素中的文本,可选择 left、right 和 center |
text-decoration | 向文本添加修饰 |
text-indent | 缩进元素中文本的首行 |
text-transform | 元素中的字母 |
unicode-bidi | 设置文本方向 |
white-space | 元素中空白的处理方式 |
word-spacing | 字间距 |
应用时,可以进行以下设置
body{ color: red; text-align: center;}p {text-indent: 5em;}
在网页展现时,标签 body
和 p
中元素就会按照设置进行显示。
链接
在 css 的链接属性中,可以对其颜色、字体、背景进行相应的设置,不同的状态我们可以设置对应的样式。
4种链接状态
css 共有以下几种链接状态:
-
a:link
:普通的、未被访问的链接; -
a:visited
:用户已访问的链接; -
a:hover
:鼠标指针位于链接的上方; -
a:active
:链接被点击的时刻。
在进行设置中,有以下两种要求:
-
a:hover
必须位于 a:link
和 a:visited
之后; -
a:active
必须位于 a:hover
之后。
修改链接下划线
只需要在链接属性中添加 text-decoration
属性,将对应的值设置为空即可。
a:link{ background-color:#B2FF99; text-decoration:none;}a:visited {background-color:#FFFF85;}a:hover {background-color:#FF704D;}a:active {background-color:#FF704D;}
列表
在 html 中学习过列表的一些设置,这里主要讲述的是如何通过 css 进行列表的设置。
简单的列表类型
列表有无序、有序之分,无序列表又可以用不同的标记来区分,而 list-style-type
这个属性我们就可以用来控制标记类型。
/* html 中添加以下内容 */ulclass='circle'> li>hahali> li>wawali>ul>olclass='square'> li>hahali> li>wawali>ol>/* css 中的设置 */ul.circle {list-style-type:circle}ol.square {list-style-type:upper-roman}}
列表项图片
在无序列表中,除了进行一些默认的设置外,并没有其他可选的内容,但是 css 可以提供图片来作为标记。
ul.img1{list-style-image:url('1.ico')}
表格
在 css 表格的设置中,需要先了解一下属性:
属性 | 描述 |
border-collapse | 设置是否把表格边框合并为单一的边框 |
border-spacing | 设置分隔单元格边框的距离。 |
caption-side | 设置表格标题的位置。 |
empty-cells | 设置是否显示表格中的空单元格。 |
table-layout | 设置显示单元、行和列的算法。 |
这里也以一个例子来说明:
/* html 部分 */tableid='tb'> tr> th>nameth> th>ageth> th>numberth> tr> tr> td>litd> td>3td> td>4td> tr> trclass='tr2'> td>litd> td>3td> td>4td> tr> tr> td>litd> td>3td> td>4td> tr> trclass='tr2'> td>litd> td>3td> td>4td> tr>table>
/* css 部分*/#tb td,th{ border: 1px solid green; padding: 5px;}#tb{ border-collapse: collapse; width: 500px; text-align: center;}#tb th{ text-align: center; color: black; background-color: lightseagreen;}#tb tr.tr2 td{ color: black; background-color: #B2FF99;}
显示效果如下图
轮廓
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度。涉及到的属性有:
属性 | 描述 |
outline | 在一个声明中设置所有的轮廓属性。 |
outline-color | 设置轮廓的颜色. |
outline-style | 设置轮廓的样式。 |
outline-width | 设置轮廓的宽度。 |
/* html 部分 */<>
'p1'>matt
's blogThis is mtt'
s blog.
>/* css 部分 */#p1{ outline-color: #FF704D; outline-style: groove;
outline-width: 10px;}
#p2{ outline-style: dotted;
outline-color: green;
outline-width: 5px;}
显示效果如下图所示:
css 选择器
选择器是 css 中最常用的组件,本节就介绍一下 css 中最常见的几种选择器。
元素选择器
最常见的选择器就是元素选择器,文档的元素的就是最基本的选择器。比如 h1
、 a
等,在 css 中可以这样实现:
/*第一种,直接对某个元素进行相应的设置*/h1{ color: cadetblue; }/*第二种,对多个元素执行同样的操作*/h1,h2,h3,h4{ color: cadetblue;}/*第三种,对没有特别特定元素设置的元素都执行同样的操作(除 h4外,其他执行的操作都一样)*/*{ color: cadetblue;}h4{ color: darkslategray;}
类选择器
类选择器允许以一种独立与文档元素的方式来制定样式。 .class{}
这是类选择器的标志,点后面是属性名,大括号里面就是具体的设置,如:
/*第一种,最简单的使用方法*//* 调用方式:matt
*/.div{
color: cadetblue;}
/*第二种,将类选择器结合元素选择器来使用,下面的例子这个 .div 就只会对 h1 起作用*//* 调用方式:matt
*/
h1.div{
color: cadetblue;}
/*第三种,多类选择器(.class.class{}),它可以继承多个类的作用*//* 调用方式:shiyanlou is my home
*/.p1{
color: cadetblue;}
.p2{
font-size:
20px;}
.p1.p2{
font-style: italic;}
id 选择器
id 选择器类似于类选择器,id 选择器的引入是用 #
,就和类选择器的 .
是一样的效果,它与类选择器的区别是:
- id 顾名思义只能在文档中使用一次,而类可以使用多次;
- id 选择器不能像刚才类选择器一样结合使用。
/* html 中的用法 */'div'>matt's blog
/* css 中的配置*/#div{ color: cadetblue;}
属性选择器
对带有指定属性的 HTML 元素设置样式。
/* 第一种,对带有 title 属性的所有元素设置样式 */[title] {
color:red;}
/* 第二种,为 title='te' 的所有元素设置样式 */[title=te]{
color: red;}
/* 第三种,为 href='http://matt33.com' 的标签 a 设置元素样式 *//* 调用方式:matt's blog */a[href='http://matt33.com']{
color: cornflowerblue;}
其他选择器
其他的还有:
下面仅列出一种后代选择器
/* html */This is strong>mystrong> blog.
/* css */p
strong{ color: cadetblue;}
css 盒子模型
css 的盒子模型主要适用于网页的布局。
盒子模型概述
盒子的组成包括:
- margin(外边距):边框以外就是外边距,默认外边距是透明的(可以为负);
- border(边框):内边距的边缘就是边框;
- padding(内边距):直接包围内容的部分,它呈现了元素的背景;
- content(内容):正文框的最内部分就是实际的内容.
其中,内边距、边框和外边距都是可选的,默认值是0。下面用一张简单的图来描述它们的结构
内边距
内边据在正文(content)外、边框(border)内,控制该区域最简单的属性是 padding
属性
-
padding
属性接受长度值或百分比值,但不允许使用负值; - 也可以进行统一的内边距设置,也可以进行单边的内边距设置。
- 设置某一边的边据时,可以通过以下四个属性:
padding-top
、 padding-right
、 padding-bottom
、 padding-left
.
举个栗子
/* html 部分 */tableborder='1'> tr> td> h1>正文h1> td> tr>table>/* css 部分 */h1 { padding-left: 5cm; padding-right: 5cm; padding-top: 30px; padding-bottom: 30px;}
边框
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
- 边框的宽度可以通过这几个参数来设置:
border-top-width
、 border-right-width
、 border-bottom-width
、 border-left-width
; - 同样可以使用属性控制各个边框的颜色:
border-top-color
、 border-right-color
、 border-bottom-color
、 border-left-color
。
外边距
外边距就是围绕在内容框的区域,也可以使用任何长度的单位、百分数来进行设置。
- 宽度的设置:
margin-top
、 margin-right
、 margin-bottom
、 margin-left
; - margin 的默认值是 0;
- 在宽度设置时,可以借助于对称复制;
/* html 部分 */divclass='wb'> divclass='bk'> divclass='nj'> divclass='zw'> matt's blog div> div> div>div>/* css 部分 */.wb{ margin: 100px;}.bk{ border-style: groove;}.nj{ padding: 10px;}.zw{ background-color: cornflowerblue;}
css 一些高级用法
这里是 css 中一些高级的常见用法
定位
定位,就是定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
在 css 中,有三种基本的定位机制:
- 普通流:在位置顺序决定排版顺序;
- 浮动:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止;
- 绝对定位:绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
定位有以下几个属性:
- position:将元素放在一个静态的,相对的,绝对的或固定的位置;
- 通过对 top、left、right、bottom 这四个属性的赋值让元素向对应的方向偏移;
- overflow:设置元素溢出其区域发生的事情;
- clip:设置元素的显示形状,多用于图片;
- vertical-align:设置元素的垂直对其方式;
- z-index:设置元素的堆叠顺序。
position
属性,有以下四种设置:
- relative:就是普通流;
- absolute:这个就是绝对定位,该元素区域会与文档区域重合,因为它使用该元素与文档流无关;
- fixed:将元素固定下来,就算滚动屏幕,它也会在同一个地方不会动;
- static:设置以后,偏移量什么的就没用了。
.position1{ width: 100px; height: 100px; background-color: cornflowerblue; position: relative; left: 60px;}
浮动
这里涉及到的属性就是 float
,其值可以赋值为:
- left: 元素向左浮动;
- right: 元素向右浮动;
- none: 不浮动;
- inherit: 从父级继承浮动的属性;
- clear: 主要用于去掉向各方向的浮动属性(包括继承来的属性)。
/* css 部分 */.qd{ width: 100px; height: 100px; background-color: lightskyblue; float: left;}.wd{ width: 100px; height: 100px; background-color: lightseagreen; float: left;}.ed{ width: 100px; height: 100px; background-color: lightsalmon; float: right;} 效果如下图所示:
尺寸
尺寸属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。涉及到的属性有:
导航栏
这里通过一个示例来实现导航栏的功能。
/* html 部分 */ul> li>ahref='http://matt33.com'>blog1a>li> li>ahref='http://matt33.com'>blog2a>li> li>ahref='http://matt33.com'>blog3a>li> li>ahref='http://matt33.com'>blog4a>li>ul>/* css 部分 */ul{ list-style: none;}li{ float:left;}a:link,a:visited{ text-decoration: none; background-color: lightgray; display: block; width: 100px; margin:5px 10px;}a:active,a:hover{ background-color: cadetblue;}
显示效果如下:
图片
插入一张图片,加上一句描述符,使用 div
继承
/* html 部分 */<>'image'> <>'./hha.jpg'target='_self'> <>'hha.jpg'width='150px'height='150px'> <>'text'>haha
/* css 部分 */.image{ border: 2px solid darkgrey; width: auto; height: auto; float: left; text-align: center; padding: 5px;}img{ padding: 5px;}.text{ font-size: 20px; margin-bottom: 5px;} 显示效果如下:
然后可以通过 opacity
属性来设置透明度,属性值的范围为0-1,0是完全透明,1是完全不透明。
到这里,css 基本内容已经总结完了,不过本文后续会一直更新,遇到什么常用的设置,都会更新到本文中。