Web技术之CSS

本文最后更新于：1 年前

CSS简介

  • CSS 指层叠样式表 (Cascading Style Sheets)

  • 样式定义如何显示 HTML 元素

  • 样式通常存储在样式表中

  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

  • 外部样式表可以极大提高工作效率

  • 外部样式表通常存储在 CSS 文件中

  • 多个样式定义可层叠为一个

CSS语法

CSS 实例

CSS声明总是以分号(;)结束，声明总以大括号({})括起来:

rules

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS 注释

CSS注释以 /* 开始, 以 */ 结束

CSS id和class

id 选择器

可以为标有特定 id 的 HTML 元素指定特定的样式。（一个元素）

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义

注意：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

1
2
3
4
5
6
/*在CSS中定义id选择器*/
#para1 
{    
    text-align:center;    
    color:red; 
}

class 选择器

class 选择器用于描述一组元素的样式，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

1
2
/*所有拥有 center 类的 HTML 元素均为居中*/
.center {text-align:center;}
1
2
3
/*指定特定的HTML元素使用class/*
/*所有的 p 元素使用 class="center" 让该元素的文本居中*/
p.center {text-align:center;}

CSS创建

外部样式表

每个页面使用 <link>标签链接到样式表。 <link>标签在（文档的）头部

1
2
3
<head> 
    <link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存

内部样式表

使用 <style> 标签在文档头部定义内部样式表

1
2
3
4
5
6
7
<head> 
    <style>
        hr {color:sienna;} 
        p {margin-left:20px;} 
        body {background-image:url("images/back40.gif");} 
    </style> 
</head>

内联样式

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性

1
<p style="color:sienna;margin-left:20px">这是一个段落。</p>

注意：不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px" 。

多重样式优先级

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

CSS背景

Property 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。

CSS文本属性

属性 描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距（单词间距word-spacing）
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

CSS字体

用em来设置字体大小

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

通过百分比和EM组合，设置 <body>元素的默认字体大小的是百分比

Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。

注意：将italic理解成 是使用文字的斜体，oblique 是让没有斜体属性的文字倾斜！对于没有斜体的字体应该使用 oblique 属性值来实现倾斜的文字效果。

CSS链接

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

改变属性color、text-decoration、background-color

注意：a:hover 必须跟在 a:link 和 a:visited后面；a:active 必须跟在 a:hover后面

CSS列表

list-style-type，list-style-image

浏览器兼容性解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
ul
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
ul li
{
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px; 
    padding-left: 14px; 
}

例子解释：

  • ul:
    • 设置列表类型为没有列表项标记
    • 设置填充和边距 0px（浏览器兼容性）
    • 使用 margin:0 和 padding:0 来移除小标记（如内边距和外边距）
  • ul 中所有 li:
    • 设置图像的 URL，并设置它只显示一次（无重复）
    • 您需要的定位图像位置（左 0px 和上下 5px）
    • 用 padding-left 属性把文本置于列表中

简写属性list-style

按顺序设置如下属性：

  • list-style-type
  • list-style-position
  • list-style-image

如果上述值丢失一个，其余仍在指定的顺序，就没关系。

盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

box_model

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

边框border

  • 上右下左

  • width, style, colour / 四个方向的边框 -> 可分开也可简写

轮廓outline

  • 位于边框border边缘的外围，不会增加额外的width或者height，可起到突出元素的作用。

  • 轮廓属性指定元素轮廓的样式style、颜色color和宽度width。

外边距margin

  • 清除周围的（外边框）元素区域
  • 没有背景颜色，是完全透明的，即只能改变width（不用指定）
  • margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性
  • 可简写

### 填充 / 内边距padding

  • 定义元素边框border与元素内容content之间的空间

  • 同margin，无颜色，只能改变距离

分组与嵌套

分组选择器

每个选择器用逗号分隔

嵌套选择器

  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class="marked" 的元素指定一个样式。
  • .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

Display(显示) 与 Visibility（可见性）

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是这两种方法会产生不同的结果：

  • visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。(visiable collapse->是与 table 相关的元素, 占用的空间会释放)

  • display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

display——块和内联元素

修改display的属性值为inline/block

PS：

块级元素(block)特性：

  • 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
  • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

  • 和相邻的内联元素在同一行;
  • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

Position(定位)

static

默认值，即没有定位，遵循正常的文档流对象

静态定位的元素不会受到 top, bottom, left, right影响。

relative

定位相对其正常位置（可为负，如left:-20px表示向左侧位置左移20像素）

fixed

元素的位置相对于浏览器窗口是固定位置。

absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

不占空间，会与其他重叠

sticky

基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

Float(浮动)

浮动元素

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

清除浮动

clear 属性指定元素两侧不能出现浮动元素

水平 & 垂直对齐

元素居中对齐

可以使用 margin: auto;设置到元素的宽度将防止它溢出到容器的边缘

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐

为了文本在元素内居中对齐，可以使用 text-align: center;

图片居中对齐

使用 margin: auto; 并将它放到 块 元素中，即display: block;

左右对齐 - 使用定位方式

使用 position: absolute;

提示: 当使用 position 来对齐元素时, 通常 **

** 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异

左右对齐 - 使用float方式

垂直对齐

设置容器上下 padding 相同实现垂直居中和使用 line-height=height 实现垂直居中仅对单行文本有效，当文本行数超过单行时：

  • 1）padding：文本仍然处于容器垂直居中的位置，但是容器的 height 会随着文本行数的增加而增大；
  • 2）line-height=height：容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示；

多行文本可使用 vertical-align: middle; 来实现元素的垂直居中，但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。

组合选择器

后代选择器

以空格 分隔

用于选取某元素的后代元素

子元素选择器

以大于 > 号分隔

只能选择作为某元素直接/一级子元素的元素

相邻兄弟选择器

以加号 + 分隔

可选择紧接在另一元素后的元素，且二者有相同父元素

后续兄弟选择器

以波浪号 ～ 分隔

选取所有指定元素之后的相邻兄弟元素

创建导航栏

垂直导航栏

水平导航栏

想链接到具有相同的大小，必须使用浮动

内联列表项

display:inline; -默认情况下，<li>元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行。

浮动列表项

  • float:left- 使用浮动块元素的幻灯片彼此相邻
  • display:block- 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度(改变的是a元素而不是li元素)
  • width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
cs
Web CSS

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！