您的当前位置：首页 CSS(CascadingStyleShee)_html/css

CSS(CascadingStyleShee)_html/css

来源：料理美食网

1、CSS是Cascading Style Sheet这个几个英文单词的缩写，翻译成中文是“层叠样式表”的意思

CSS能让网页制作者有效的定制、改善网页的效果。

CSS是对HTML的补充，网页设计师曾经为无法很好的控制网页的显示效果而倍感苦恼，CSS的出现解决了这个问题。

Css实现了网页内容和页面效果的彻底分离。

参考资料：

完整版W3CSchool线下教程链接: http://pan.baidu.com/s/1jGSIqxg 密码: iuch

TakeColor 8.0 CN Green取色工具链接：http://pan.baidu.com/s/1skl3naP%20 密码：3qdl

Ctrl+j 弹出智能提示的快捷键

2、CSS的几种设置方式(你可以通过怎样的方式向HTML页面中写入CSS代码)

有三种方式可以将样式表加入到HTML文档中，每种方式都有自己的优缺点，这三种方式是：

内联样式表(在标签内设置元素的样式)

嵌入样式表(需要在head标签内写)

外部样式表 link

内联样式表缺点：如果要将同样的样式风格设置到网页中所有的段落上，就需要对每个

标签都进行重复的设置。

嵌入样式表缺点：如果要为整个网站定义通用的的样式风格，也就是同样的样式风格要被应用到很多网页时，使用嵌入样式表，

则需要在每个标签中都加入同样的代码段。为了解决这个问题，我们可以使用外部样式表

3、样式规则的选择器(通过怎样的途径来获得页面上要设置样式的元素)

1: HTML Selector

2: Class Selector （需要给要设置样式的元素的class属性赋值）

3: ID Selector （需要给要设置样式的元素的id属性赋值）

4: 关联选择器 P EM{组合选择器

6: 伪元素选择器

伪元素选择器是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。

例如，对于超链接标签()的正常状态(没有任何动作前)、访问过的状态、选中状态、光标移到超链接文本上的状态，对于段落的首字母和首行，都可以使用伪元素选择器来定义。

目前常用的伪元素有以下几种：

A:active 选中超链接时的状态

A:hover 光标移动到超链接上的状态

A:link 超链接的正常状态

A:visited 访问过的超链接状态

P:first-line 段落中的第一行文本

P:first-letter 段落中的第一个字母

3、CSS当中的样式属性详解

Css当中的属性非常多，大体上可以分为以下几类：字体、背景、文本、位置、布局、边缘、列表

1: 字体

字体的属性主要包括文字的字体、大小、颜色、显示效果等基本样式，下面是各种字体属性的详细介绍

Font-family: 该属性用于设置字体系列

Font-size: 该属性定义文字的大小，可以使用度量单位来设置字体的大小，也可以使用一个相对的字体大小。还可以使用绝对的大小标记符

绝对大小的设置为 xx-small、x-small、small、medium、large、x-large、xx-large中的任意一个。Xx-small为最小，xx-large为最大

font-style: 该属性用于定义字体样式为Normal、Italic或者Oblique（斜体）

text-decoration: 该属性用于在文本中条件下划线、上划线、中划线、闪烁效果

font-weight: 该属性用于设置粗体字的磅值

该属性的值有：normal、bold、bolder、lighter、100~900

2: 背景

背景包括背景颜色、背景图像、以及背景图像的控制

Background-color: 设置背景色，transparent表示透明的背景色

Background-image：设置元素的背景图像

Background-repeat：确定背景图像是否以及如何重复

这个属性的取值no-repeat：表示背景图像只在元素的显示区域中出现一遍

Repeat：在水平和垂直方向上垂直。Repeat-x和Repeat-y分别在水平或者垂直方向上重复

Background-attachment：确定背景图像是否跟随内容滚动，

设置为fixed时，表示固定背景图像，为scroll时，表示图像跟随内容的移动而移动。

Background-position: 指定背景图像的水平位置和垂直位置。水平位置的取值可以是left、center、right。也可以是数值。

垂直的取值可以是top、center、bottom。也可以是数值。

3: 文本

文本的属性包括：文字间距、对齐方式、上标、下标、排列方式、首行缩进。

Word-spacing: 设置单词之间的间距

Letter-spacing: 设置字符之间的间距

Text-align: 设置文本的水平对齐方式，取值可以是left、right、center、justfy

Text-indent: 设置第一行文本的缩进值 eg:首行缩进2字体 Text-indent:2em;

Line-height: 设置文本所在行的行高

文档流：div+css布局使用 position / float / clear

4: 位置

位置属性就是制定元素的位置。

Position：设置对象的定位方式。有三种取值：absolute(绝对定位)、relative(相对定位)和static(无特殊定位)默认为static。

Left：设置元素左边的水平位置

Top：设置元素顶部的垂直位置

Width：设置元素显示的宽度

Height：设置元素显示的高度

Z-index:使用定位后

5: 边缘

Margin类用于设置元素的边界与其他元素的空隙大小

Margin-top：设置元素的上边界和与其他元素之间的空隙大小

Margin-right：设置元素的右边界与其他元素之间的空隙大小

Margin-bottom：设置元素的下边界与其他元素之间的空隙大小

Margin-left：设置元素的左边界与其他元素之间的空隙大小

Margin：用作上面4个属性的略写

Padding类属性用于设置元素边界与内部内容之间的空隙大小

Padding-top: 设置元素的上边界与内部内容之间的空隙大小

Padding-right：设置元素的右边界于内部内容之间的空隙大小

Padding-bottom：设置元素的下边界与内容之间的空隙大小

Padding-left：设置元素的左边界与内部内容之间的空隙大小

Padding：用作上面4个属性的略写

Width类属性用于设置元素边框的宽度

可以使用thin(细)、medium(中)、thick(粗)三个值中的一个

Border-top-width：指定元素上边框的宽度

Border-right-width：用于指定元素右边框的宽度

Border-left-width：用于指定元素左边框的宽度

Border-bottom-width：用于指定元素下边框的宽度

Border-width：用作对上面四个属性的略写

Color属性用于设置元素边框的颜色

Border-top-color:

Border-left-color:

Border-bottom-color:

Border-right-color:

Border-color: 用于上面四个属性的略写

Style类属性用于设置元素边框的样式

可以使之为none、dotted(点线)、dashed(虚线)、solid(实现)、double(双线)、groove(凹槽)、ridge(凸槽)、inset(凹边)、outset(凸边)。

布局：

Display：inline|block|none

料理美食网还为您提供以下相关内容希望对您有帮助：

HTML与CSS区别

HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是Web前端开发中不可或缺的两部分，它们各自承担着不同的职责，共同构建了网页的结构和样式。一、HTML：网页构成的基础 HTML，即超文本标记语言，是用于描述网页结构和内容的标记语言。它通过一系列标签（如<html>、<

关于html和css的区别

一、定义不同 HTML（Hyper Text Markup Language，超文本标记语言）：用于定义网页的内容结构。通过标准的标签来组织网页中的文本、图片、链接、音频、视频等元素。是网页的骨架，决定了网页上信息的排列和组织方式。CSS（Cascading Style Sheets，层叠样式表）：用于定义网页的样式和布局。控制网页中元素的...

css文件的格式

CSS是Cascading Style Sheet 的缩写，译作「层叠样式表单」，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。css文件格式用HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言表示。有三种方法可以在站点网页上使用CSS：1、外联式L...

css全称是什么?

一、css是CascadingStyleSheets的桐巧缩写,即层叠式样式表单,它是由W3C协会制定并发布的一个网页排版式标准,是对HTML语言功能的补充。二、HTML和CSS的区别? 1、定义不同: html是HyperTextMark-upLanguage的缩写,即超文本标记语言; css是CascadingStyleSheets的缩写,即层叠式样式表单,它是由W3C协会制定并发布的一个...

CSS的具体含义

CSS是Cascading Style Sheet的缩写，有些书上把它译为"层叠样式单"或"级联样式单"（下文简称"样式单"），它是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制...

dreamweaver中css是什么

在Dreamweaver中，CSS（层叠样式表，Cascading Style Sheets）是用于控制网页内容外观的格式规则集合，它通过定义样式规则来精确控制HTML或XML文档中元素的呈现形式，是网页设计与开发的核心技术之一。一、CSS的核心功能与规则结构CSS通过选择器和声明组成的规则控制网页元素。选择器用于定位目标元素（如标签名、...

DW中CSS是什么意思?

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更...

css是一种用于什么的技术

CSS（层叠样式表，Cascading Style Sheets）是一种用于表现HTML或XML等文件样式的标记性语言，主要作用是描述网页的表现形式并控制元素样式。核心功能与特点CSS以HTML为基础，通过定义元素的属性（如位置、大小、颜色、字体等）实现网页美化。其核心优势包括：样式与内容分离：将样式代码于HTML文档，存储在...

css是什么用来干什么的

CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将...

css 是什么?

CSS(CascadingStyleShee)_html/css

猜你还关注