欢迎光临
我的个人博客网站

CSS快速入门


Blog:博客园 个人
参考:https://www.w3school.com.cn/css/index.asp

概述

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

优点

  • 使网页代码更少,网页下载更快
  • 实现了内容与样式的分离,使网站维护更快捷
  • 使网页与浏览器的兼容性更好

语法结构

每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

CSS快速入门

selector {declaration1; declaration2; ... declarationN } 

声明

每条声明由一个属性和一个值组成。属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。请使用花括号来包围声明。

selector {property: value} 

如果值为若干单词,则要给值加引号:

p {font-family: "sans serif";} 

多重声明

如果要定义不止一个声明,则需要用分号将每个声明分开。

p {text-align:center; color:red;} 

推荐每行只描述一个属性,例如:

p {   text-align: center;   color: black;   font-family: arial; } 

空格和大小写

  • 是否包含空格不会影响 CSS 在浏览器的工作效果;
  • 与 XHTML 不同,CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。

引入方式

行内样式(内联样式)

请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。例如:

<p style="color: sienna; margin-left: 20px"> This is a paragraph </p> 

内部样式

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,例如:

<head> <style type="text/css">   hr {color: sienna;}   p {margin-left: 20px;}   body {background-image: url("images/back40.gif");} </style> </head> 

外部样式

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部:

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

选择器

优先级:行内样式 > id选择器 > 类选择器 > 元素选择器 > 通配符选择器

元素选择器(标签选择器)

最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。

如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:

html {color:black;} h1 {color:blue;} h2 {color:silver;} 

类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用,也可以与其他元素结合使用。

语法

我们使用以下语法向这些归类的元素应用样式,即类名前有一个点号.,然后结合通配选择器:

*.important {color:red;} 

只想选择所有类名相同的元素,可以在类选择器中忽略通配选择器:

.important {color:red;} 

ID选择器

ID 选择器允许以一种独立于文档元素的方式来指定样式。

语法

首先,ID 选择器前面有一个#号,也称为棋盘号或井号。

例如:

*#intro {font-weight:bold;} 

ID 选择器中可以忽略通配选择器。前面的例子也可以写作:

#intro {font-weight:bold;} 

引用

ID 选择器不引用 class 属性的值,它要引用 id 属性中的值。例如:

<p id="intro">This is a paragraph of introduction.</p> 

通配符选择器

CSS2 引入了一种新的简单选择器 – 通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。

例如,下面的规则可以使文档中的每个元素都为红色:

* {color:red;} 

背景

CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。

属性

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

背景色

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。

例如:

p {background-color: gray; padding: 20px;} 

背景图像

要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像。

如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:

body {background-image: url(/i/eg_bg_04.gif);} 

背景定位

可以利用 background-position 属性改变图像在背景中的位置。

为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

例如:

p   {      background-image:url('bgimg.gif');     background-repeat:no-repeat;     background-position:top;   } 

文本

CSS 文本属性可定义文本的外观。

通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。

属性

属性 描述 CSS
color 设置文本的颜色。 1
direction 规定文本的方向 / 书写方向。 2
letter-spacing 设置字符间距。 1
line-height 设置行高。 1
text-align 规定文本的水平对齐方式。 1
text-decoration 规定添加到文本的装饰效果。 1
text-indent 规定文本块首行的缩进。 1
text-shadow 规定添加到文本的阴影效果。 2
text-transform 控制文本的大小写。 1
unicode-bidi 设置文本方向。 2
white-space 规定如何处理元素中的空白。 1
word-spacing 设置单词间距。 1
hanging-punctuation 规定标点字符是否位于线框之外。 3
punctuation-trim 规定是否对标点字符进行修剪。 3
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。 3
text-outline 规定文本的轮廓。 3
text-overflow 规定当文本溢出包含元素时发生的事情。 3
text-shadow 向文本添加阴影。 3
text-wrap 规定文本的换行规则。 3
word-break 规定非中日韩文本的换行规则。 3
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3

表格

CSS 表格属性可以帮助您极大地改善表格的外观。

属性

属性 描述 CSS
border-collapse 规定是否合并表格边框。 2
border-spacing 规定相邻单元格边框之间的距离。 2
caption-side 规定表格标题的位置。 2
empty-cells 规定是否显示表格中的空单元格上的边框和背景。 2
table-layout 设置用于表格的布局算法。 2

定位

CSS 定位属性允许你对元素进行定位。

属性

CSS 定位属性允许你对元素进行定位。

属性 描述
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。

框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:

* {   margin: 0;   padding: 0; } 

在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:

CSS快速入门

#box {   width: 70px;   margin: 10px;   padding: 5px; } 

Tips:

  • 内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
  • 外边距可以是负值,而且在很多情况下都要使用负值的外边距。

术语

  • element : 元素。
  • padding : 内边距,也有资料将其翻译为填充。
  • border : 边框。
  • margin : 外边距,也有资料将其翻译为空白或空白边。

display属性

  • block:将元素变成块级标签,可以设置高度和宽度
  • inline:将元素变成行内标签,不能设置高度和宽度
  • inline-block:同时具有两种
  • none:标签消失

例如:

<span style="background-color:gray;height:70px;width:20px;">行内标签</span> 

overflow溢出处理属性

  • Overflow (水平和垂直均设置)
  • Overflow-x (设置水平方向)
  • Overflow-y (设置垂直方向)

设置水平滚动条:

overflow-x : scroll 

设置垂直滚动条:

overflow-y : scroll 
赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS快速入门
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏