CSS

合集下载

CSS超全笔记（适合新手入门）

CSS超全笔记（适合新⼿⼊门）CSSCSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。

引⼊CSS样式表（书写位置）CSS可以写到那个位置？是不是⼀定写到html⽂件⾥⾯呢？内部样式表内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。

type="text/CSS" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。

⾏内式（内联样式）内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。

是通过标签的style属性来设置元素的样式，其基本语法格式如下：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。

其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。

外部样式表（外链式）链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：<head><link href="CSS⽂件的路径" rel="stylesheet" /></head>注意： link 是个单标签哦该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。

css用法

css用法CSS（Cascading Style Sheets）是前端开发过程中必不可少的一部分。

它为网页设计师提供了更多的控制能力，可以实现更加美观、动态的页面效果。

在这篇文章中，我将会分步骤阐述CSS的用法。

1. 引入CSS文件要使用CSS，需要将CSS文件引入HTML文件。

通常情况下，我们会使用link标签来实现这个过程。

link标签应该写在HTML文件的head标签中。

以下是一个示例：```<head><link rel="stylesheet" type="text/css" href="styles.css"> </head>```这里，我们引入了一个名为styles.css的CSS文件。

2. 选择元素在CSS中，选择器用于指定要应用样式的HTML元素。

有几种不同的选择器类型，包括标签选择器（如div、p、h1等），id选择器，class选择器等。

这些选择器可以使用单个值，也可以用复合语句来选择更具体的元素。

以下是一个示例：```/* 标签选择器 */div {background-color: blue;}/* class选择器 */.red {color: red;}/* id选择器 */#myElement {font-size: 20px;}```在此示例中，div选择器选择了所有的div元素，会给它们添加一个蓝色背景。

.red选择器只会给class属性为red的元素添加红色字体颜色。

#myElement选择器只会给id属性为myElement的元素添加20像素大小的字体。

3. 应用样式CSS属性被用来定义样式，如颜色、大小和字体类型等等。

可以将样式应用到一组元素、单个元素或具有特定类或id属性的元素上。

以下是一个示例：```/* 应用到class为myClass的元素 */.myClass {color: red;font-size: 18px;text-align: center;}/* 应用到id为myElement的元素 */#myElement {color: blue;font-size: 20px;text-align: left;}```在此示例中，在class为myClass的元素中，text-align属性被设置为center，字体颜色设置为红色，字体大小设置为18像素。

简述css的定义与使用方法

简述css的定义与使用方法CSS的定义与使用什么是CSS？CSS（Cascading Style Sheets）是一种用于定义网页样式的语言。

它与HTML结合使用，通过选择器和声明来控制文档的样式。

使用CSS，我们可以对文本、链接、图像等元素进行字体、颜色、大小、布局等方面的美化。

CSS的使用方法内部样式表内部样式表是将CSS代码直接写在HTML文件的<style>标签内部。

这种方式适用于单个网页的样式设定，代码会放在Head标签中。

例如：<head><style>p {color: red;font-size: 16px;}</style></head><body><p>这是一个段落。

</p></body>外部样式表外部样式表是将CSS代码放在一个单独的CSS文件中，然后在HTML文件中通过<link>标签引用。

这种方式适用于多个网页共享相同样式的情况，使样式与内容分离，方便维护。

例如：<head><link rel="stylesheet" href="styles.css"></head><body><p>这是一个段落。

</p></body>内联样式内联样式是将CSS代码直接写在HTML标签的style属性中。

这种方式适用于单个元素的样式设定，代码直接嵌入在HTML标签中。

例如：<body><p style="color:red; font-size:16px;">这是一个段落。

< /p></body>CSS的选择器CSS的选择器用于选中需要样式化的HTML元素。

以下是常用的选择器：•元素选择器：通过元素名选中元素，如p选中所有段落。

css属性大全

css属性大全CSS属性大全。

CSS（Cascading Style Sheets）是一种用来为网页添加样式和布局的样式表语言。

它可以控制网页的字体、颜色、间距、边框、背景等各种样式，是网页设计中不可或缺的一部分。

在这篇文档中，我们将详细介绍CSS中的各种属性，帮助您更好地掌握CSS的应用。

1. 字体属性。

字体属性用于设置网页中文本的字体样式、大小、粗细等。

常用的属性包括font-family（设置字体系列）、font-size（设置字体大小）、font-weight（设置字体粗细）、font-style（设置字体样式）等。

2. 文本属性。

文本属性用于设置文本的对齐方式、行高、间距等。

常用的属性包括text-align（设置文本对齐方式）、line-height（设置行高）、letter-spacing（设置字符间距）、word-spacing（设置单词间距）等。

3. 背景属性。

背景属性用于设置网页元素的背景样式。

常用的属性包括background-color（设置背景颜色）、background-image（设置背景图片）、background-repeat（设置背景重复方式）、background-position（设置背景位置）等。

4. 边框属性。

边框属性用于设置网页元素的边框样式。

常用的属性包括border-width（设置边框宽度）、border-style（设置边框样式）、border-color（设置边框颜色）、border-radius（设置边框圆角）等。

5. 盒模型属性。

盒模型属性用于设置网页元素的尺寸、内边距、外边距等。

常用的属性包括width（设置元素宽度）、height（设置元素高度）、padding（设置内边距）、margin（设置外边距）等。

6. 定位属性。

定位属性用于设置网页元素的位置。

常用的属性包括position（设置定位方式）、top（设置元素顶部位置）、left（设置元素左侧位置）、z-index（设置元素层级）等。

css入门教程

css入门教程CSS（层叠样式表）是一种用来定义HTML文档样式的语言。

它可以用来布局HTML页面、设置字体、颜色、大小等。

本篇介绍我们将学习如何使用CSS来美化网页。

要使用CSS，我们需要先了解一下CSS的基本结构。

一个基本的CSS规则由选择器和声明块组成。

选择器用于指定要应用样式的HTML元素，而声明块则包含要应用的样式。

例如，要将段落的文本颜色设置为红色，我们可以使用以下CSS规则：```p {color: red;}```以上代码中，选择器为“p”，代表要应用样式的所有段落元素。

在声明块中，我们使用属性“color”来定义文本颜色，并将其值设置为“red”。

CSS属性可以设置元素的各种样式。

例如，“color”属性用于设置文本颜色，“font-size”属性用于设置字体大小，“background-color”属性用于设置背景颜色等等。

除了选择器外，CSS还提供了一些其他方法来选择要应用样式的元素。

例如，我们可以使用类选择器来选择具有相同类名的元素，使用ID选择器来选择具有相同ID的元素，使用伪类选择器来选择某个元素的特定状态等等。

CSS还支持级联（cascading）的概念。

这意味着在HTML文档中使用多个CSS规则时，如果有相同的样式属性，那么将根据规则的优先级来应用样式。

一般而言，ID选择器具有最高优先级，其次是类选择器、元素选择器等。

使用CSS，我们可以对网页进行灵活而精确的样式设置。

我们可以通过设置元素的定位属性来实现布局，通过设置文本样式属性来改变字体、颜色等，还可以通过设置背景属性来改变背景图片、颜色等。

总结一下，CSS是一种强大的网页样式定义语言，我们可以使用CSS来美化网页的外观和布局。

通过选择器和声明块的组合，我们可以对HTML元素应用各种各样的样式。

同时，CSS还支持级联的概念，使我们能够更好地控制样式的优先级。

希望这个入门教程能够帮助你了解CSS的基本知识，为进一步学习和应用CSS打下基础。

css技术

CSS技术CSS就是一种叫做样式表(style sheet)的技术，也称为层叠样式表(Cascading Style Sheet)。

在主页制作时采用CSS技术，可以有效地对页面地布局、字体、颜色、背景和其他效果实现统一样式设置，从而使页面格式控制更加容易，页面布局更加轻松，整个网站风格更加容易统一。

一CSS的定义1.1 CSS的每一条定义都有如下形式：selector(property:value;property:value; ••-..}selector：样式名称，有三种形式，分别为：html 标记，如p、body、a、h2 等classidproperty:使要被修改的样式性质，例如color。

value：赋给property的值，例如赋给color的值可以是red。

例：a{color:red}这个例子可以使网页中的所有链接都变为红色。

一般来说把这样的定义全包括在<style>标识中，放到<head>・・・</head>里面。

下面是一个简单的例子，其中定义了页面中所有链接为红色、P标识的文本背景为蓝色、文本为白色。

(例CSS1.htm)1.2 CSS selector三种形式的介绍(1) Html selector (超链接伪类)Html selector就是html的标记tag例如a、p、div、td等，还可以是"标记：状态"，例如a： link , 如果用CSS定义了他们，则在整页中，这个tag的性质就按照定义来显示了。

例如，让标识td的颜色显示为红色：a td{color:red}CSS 支持样式群定义，可以将样式一次定义给不同的元素，例如：h1,h2,td{font-family:arial;font-size:40pt;color:red} "这个定义让所有的h1、h2和td标识的文本具有字体arial,大小40pt和颜色为红色的状态。

css的名词解释

css的名词解释
CSS是Cascading Style Sheets的简称，意为层叠样式表。

它是一种用于描述网页样式和布局的语言，可以决定网页中元素的字体、颜色、大小、位置、排列方式等属性，让网页变得更加美观、易读、易用。

CSS并不是一种编程语言，而是一种样式表语言，它可以与HTML配合使用实现精美的网页设计。

CSS可以分为内联样式、内部样式表和外部样式表三种类型。

内联样式一般用于单独设置某个标签的样式，声明在标签的style属性中。

内部样式表可以在HTML文件中定义，一般写在head标签内，用<style>标签包裹。

在内部样式表中，可以定义各种样式，如设置字体、颜色、边框、背景等。

外部样式表通常单独存放在一个CSS文件中，然后通过<link>标签引入HTML文件中。

使用外部样式表可以实现样式的统一管理，避免在多个HTML文件中重复定义相同的样式，同时也减小了HTML文件的体积，提高了加载速度。

css单位转换计算

css单位转换计算
在CSS中，常用的单位有像素（px）、百分比（%）、视窗单位（vw、vh）、字体单位（em、rem）等。

下面是一些常见的单位转换计算方法：
1. 像素（px）和百分比（%）之间的转换：
- 像素转百分比：百分比值 = （像素值 / 父元素的宽度） * 100%
- 百分比转像素：像素值 = （百分比值 / 100%） * 父元素的宽度
2. 视窗单位（vw、vh）的转换：
- vw（视窗宽度单位）：1vw 等于视窗宽度的 1%。

- vh（视窗高度单位）：1vh 等于视窗高度的 1%。

- 使用时需要根据实际情况计算具体数值。

3. 字体单位（em、rem）的转换：
- em（相对于父元素的字体大小）：1em 等于父元素的字体大小。

- rem（相对于根元素的字体大小）：1rem 等于根元素（通常是`<html>`元素）的字体大小。

- 使用时需要与父元素或根元素的字体大小进行计算。

其中，像素和百分比的转换相对比较简单，只需要关注父元素的尺寸；视窗单位和字体单位的转换要根据具体的上下文环境进行计算。

建议根据实际需求和场景，结合上述的计算方法进行单位转换。

CSS属性大全

CSS属性⼤全1. ⽂字属性「字体族科」（font-family），设定时，需考虑浏览器中有⽆该字体。

「字体⼤⼩」（font-size），注意度量单位。

《绝对⼤⼩》|《相对⼤⼩》|《长度》|《百分⽐》(⼀般设置双数)「字体加粗」（font-weight），除了 normal（正常）、bold（粗体）、bolder（特粗）、lighter（细体）外，还有9种以像素为度量为单位的设置⽅式（100，200，300，400，500，600，700，800，900）。

「字体风格」（font-style），也就是字型。

（normal : 正常的字体italic : 斜体。

对于没有斜体变量的特殊字体，将应⽤obliqueoblique : 倾斜的字体）「字体变形」（font-variant），字体变形属性决定了字体显⽰是normal (普通) ，还是Small-caps（⼩型⼤写字母）当⽂字中所有字母都是⼤写的时候，⼩型⼤写字母（值）会显⽰⽐⼩写字母稍⼤的⼤写字符。

有正常（normal）和值（⾃定义间隔值）两种选择⽅式。

「字母间距」（letter-spacing），其作⽤与字符间距类似，也有正常（normal）和值（⾃定义间隔值）两种选择⽅式。

「垂直对齐」（vertical-align），控制⽂字或图像相对于其母体元素的垂直位置。

如将⼀个2×3像素的GIF图像同其母体元素⽂字的顶部垂直对齐，则该GIF图像将在该⾏⽂字的顶部显⽰。

共有基线（baseline，将元素的基准线同母体元素的基准线对齐）、下标（sub，将元素以下标的形式显⽰）,上标（super，将元素以上标的形式显⽰）、顶部（top ，将元素顶部同最⾼的母体元素对齐）、⽂本顶对齐（text-top，将元素的顶部同母体元素⽂字的顶部对齐）、中线对齐（middle，将元素的中点同母体元素的中点对齐）、底部（bottom，将元素的底部同最低的母体元素对齐）及值（⾃定义）等9种选择。

css样式表的作用及使用方式

css样式表的作用及使用方式CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。

使用CSS样式设置页面格式，可将页面内容与表现形式分离。

以下是CSS样式表的主要作用及使用方式：一、作用：1. 可以灵活控制网页中文本的字体、颜色、大小、间距、风格及位置。

2. 可以灵活地为网页中的元素设置各种效果的边框。

3. 可以方便地为网页中的元素设置不同的背景颜色、背景图像及平铺方式。

4. 可以控制网页中各元素的位置，使元素在网页中浮动。

5. 可以为网页中的元素设置各种滤镜，从而产生诸如阴影、辉光、模糊和透明等只有在一些图像处理软件中才能实现的效果。

6. 可以与脚本语言相结合，使网页中的元素产生各种动态效果。

二、使用方式：1. 将样式定义在HTML元素的style属性中。

2. 将样式定义在HTML文档的header部分。

3. 将样式声明在一个专门的CSS文件中，以供HTML页面引用。

此外，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。

如果要修改样式，只需要在样式列表中找到相应的样式声明进行修改。

在多个页面中使用同一个CSS样式表，可以单独存放在一个CSS文件中，这样就可以在多个页面中使用同一个CSS样式表，实现多个页面风格的统一。

例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。

以上信息仅供参考，如需获取更多信息，建议咨询专业的编程人员。

第7章 CSS介绍与基本概念

• .center {text-align:center;} • 你也可以指定特定的HTML元素使用class。在以下实例中, 所有的 p 元素使用
class="center" 让该元素的文本居中: • p.center {text-align:center;} • 注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
选择器
• STYLE属性
• 尽管在选择器中可以使用CLASS和ID属性值，STYLE属性实际上可以替代整个选择器机制。不是只具有一个能够在选择器中引用的值(这正是ID和CLASS具有的值)，STYLE属性的值实际上是一个或多个CSS声明。
• 通常情况下，使用CSS，设计者将把所有的样式规则置于一个样式表中，该样式表位于文档顶部的 STYLE元素内（或在外部进行链接）。但是，使用STYLE属性能够绕过样式表将声明直接放置到文档的开始标记中。
• ②该属性的默认值（initial value）。当在样式表单中没有规定该属性，而且该属性不能从它的父级元素那儿继承的时候，则浏览器将认为该属性取它的默认值。
语言基础
• ③该属性所适用的元素（Applies to）。有的属性只适用于某些个别的元素，比如 white-space属性就只适用于块级元素。white-space属性可以取normal、pre和 nowrap三个值。当取normal的时候，浏览器将忽略掉连续的空白字符，而只显示一个空白字符。当取pre的时候，则保留连续的空白字符。而取nowrap的时候，连续的空白字符被忽略，而且不自动换行。
（3）多页面应用
• CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

CSS基础知识学习(含实例)

四、CSS 选择器
7. 伪类（ Pseudo-Classes Selectors ）
selector : pseudo-class { property: value } 注意：一定要按照 link，visited，hover，
例：
a:link { color: #000000; text-decoration: none; } a:visited { color: #000000; text-decoration: none; } a:hover { color: #FF0000; text-decoration: underline; } a:active { color: #FF0000; text-decoration: underline; }
例： <html> <head> <title>泡泡潜水俱乐部欢迎你</title> </head> <body> <h1> 泡泡潜水俱乐部 </h1> background-color: #000080” >泡泡潜水俱乐部</h1> style=“color: #FFFFFF; <P>泡泡潜水俱乐部为你量身打造一流的潜水服务，……</p> </body> </html>
四、CSS 选择器
3. ID 选择器（ ID Selectors ）
＃ID { property: value; } 例：
#container { width: 760px; margin: auto; } #header { height: 120px; background: url(images/bg_header.gif) no-repeat; } #content { padding: 30px; }

css知识点

css知识点
1. CSS(Cascading Style Sheets)是一门用来规定网页元素样式的语言，包括字体、颜色、大小、背景图片和边框等等。

2.CSS有三种形式：内联CSS、内部CSS和外部CSS。

3.内联CSS是在元素内部添加样式，通常用在网页中的特定元素上。

4.内部CSS是在网页的头部添加样式，通常用于个别网页。

5.外部CSS是在一个单独文件中添加样式，通常用于网站的全部网页。

6.继承是CSS中重要的概念，它使子级元素可以继承父级元素的样式，从而减少重复性的代码。

7.层叠是CSS中重要的一个概念，它决定不同样式在网页上的渲染顺序。

8.浮动是CSS中的重要概念，它可以让元素脱离文档流，实现某些布
局效果。

9. CSS弹性盒子（Flexbox）是一个新的布局模型，使布局更加简单，可以实现响应式布局。

10. CSS网格布局（Grid）是一个新的CSS布局模型，它提供一种更
强大的布局方式，可以实现更复杂的布局效果。

css课件

多列布局
多列布局允许您创建多列的页面布局。
您可以使用CSS的多列属性（ column-count、columnwidth、column-gap等）来定义列数、列宽和列间距。
多列布局常用于创建杂志、报纸等类型的页面布局。
04
CHAPTER
CSS动画与过渡效果
动画效果
01
02
03
关键帧动画
通过定义关键帧，可以创建复杂的动画效果。
背景大小
使用`background-size`属性设置背景图片的大小，可以指定具体的像素值或使用相对单位。
背景图片
使用`background-image`属性设置背景图片，可以指定图片路径或使用 URL。
背景位置
使用`background-position`属性设置背景图片的位置，可以指定像素值或使用位置关键词（如`top`、 `bottom`、`left`、`right`等）。
文字效果
通过text-align、text-transform、text-decoration等属性，控制文本的对齐方式、大小写和装饰效果。
响应式网页设计
媒体查询
通过媒体查询（media query）技术，根据不同设备的屏幕尺寸和分辨率，应用不同的CSS样式
。
弹性布局
使用flexbox或grid布局，实现元素的灵活排列和分布。
流式布局
使用百分比宽度等流式布局技术，实现元素的自适应布局。
06
CHAPTER
CSS常见问题与解决方案
CSS兼容性问题
不同浏览器对CSS属性的支持程度不同，导致页面显示效果不一致。
使用CSS3特性时，添加浏览器前缀，如 `-webkit-` 、`-moz-`、`-ms-` 等。

css-百度百科

CSS添加义项设置这是一个多义词，请在下列义项中选择浏览1. 1.层叠样式表2. 2.美国中央安全局3. 3.内容扰乱系统4. 4.反恐精英：起源5. 5.内容服务交换器6. 6.集群同步服务1.层叠样式表编辑本义项目录简介CSS的各个版本CSS历史使用CSS布局的优点感性体验CSS如何将样式表加入到网页CSS的语法:浏览器兼容性简介CSS的各个版本CSS历史使用CSS布局的优点感性体验CSS如何将样式表加入到网页CSS的语法:浏览器兼容性∙CSS设计网页的经验∙CSS Hack 汇总快查∙Xhtml+css的结构∙CSS的限制∙学好CSS的流程展开编辑本段简介CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。

通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。

页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。

将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。

编辑本段CSS的各个版本CSS有各种版本（即Level），所以知道要使用哪个版本是很重要的。

CSS 1 在1996年末成为推荐标准，其中包含非常基本的属性，比如字体，颜色、空白边。

CSS2 在此基础上添加了高级概念（比如浮动和定位）以及高级的选择器（比如子选择器、相邻同胞选择器和通用选择器）。

在编写本书时，CSS2仍然是CSS 的最新版本，尽管它早在1998年就已经成为推荐标准。

万维网联盟（W3C）的行动非常缓慢，所以尽管CSS3的开发工作在新千年开始之前就开始了，但是距离最终的发布还有相当长的路要走，为提高开发和浏览器实现的速度，CSS3被分割成模块，这些模块可以独立发布和实现。

CSS3包含一些令人兴奋的新特性，包括一个用于多列布局的模块，但是，选择器模块最接近于完成，可能在2006年成为推荐标准。

第11讲 CSS常用属性

• 在CSS代码中，使用font-family属性可以设置字体族，设置语法如下：
font-family: 字体族1,字体族2,...,通用字体族 | inherit;
• font-family的各个取值含义如下表所示：
设置了多个字体族时，浏览器显示文本内容时将按指定的字体的先后顺序选择其中一个字体，即首先会检查浏览器是否支持第一个字体，如果支持，则选择该字体，否则按书写顺序检查第二个字体，依此类推。
line-height: normal|number|length|百分数| inherit;
• 语法说明：
✓ “normal”表示使用默认行高，为默认值。 ✓ “number”表示不带任何单位的某个数字。行间距等于
此数字与当前的字体尺寸相乘的结果。 ✓“length”表示以 px|em|pt 为单位的某个数值。 ✓ “百分数”表示相对于当前字体大小的百分数。100%
1. color属性
• 在CSS代码中，使用color属性设置文本颜色，设置语法如下：
color:颜色英文单词|颜色的十六进制数|颜色的rgb值|inherit;
• 语法说明：
CSS3还可以设置 rgba值
✓ rgb使用：rgb(num,num,num)格式来表示颜色，其中r
代表红色，g代表绿色，b代表蓝色，小括号里的3个num分
3. font-size属性
• 在CSS代码中，使用font-size属性可以设置字体的大小，设置语法如下：
font-size: medium | length | 百分数 | inherit;
• font-size的各个取值含义如下表所示：
em和%单位具有可伸缩性， 1em=100%
4. font-family属性

CSS基础知识及其基本语法

CSS基础知识及其基本语法⼀、什么是CSSCSS 是层叠样式表( Cascading Style Sheets ) 的简称。

有时我们也会称之为CSS 样式表或级联样式表。

CSS 也是⼀种标记语⾔CSS 主要⽤于设置HTML 页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局和外观显⽰样式。

⼆、CSS能做什么HTML能搭建⼀个基本的⽹页，但是我们能发现其构造的⽹页是极其简陋的，这时候就需要CSS来美化⽹页。

CSS的功能⾮常强⼤，不仅能改变各个HTML元素的颜⾊，⽂字⼤⼩等，还能改变元素的内边距，外边距等。

除此之外，CSS还能改变⽹页元素的布局，通过浮动，定位等⽅式将各个元素重新排列，构造⼀个整洁，简约的⽹页。

三、CSS引⼊⽅式内部样式表内部样式表（内嵌样式表）是写到html页⾯内部. 是将所有的CSS 代码抽取出来，单独放到⼀个<style>标签中<style>div {color: red;font-size: 12px;}</style>⾏内样式表⾏内样式表（内联样式表）是在元素标签内部的style 属性中设定CSS 样式。

适合于修改简单样式<div style="color: red; font-size: 12px;">HELLO WORLD</div>外部样式表样式单独写到CSS ⽂件中，之后把CSS⽂件引⼊到HTML 页⾯中使⽤引⼊外部样式表分为两步：1. 新建⼀个后缀名为.css 的样式⽂件，把所有CSS 代码都放⼊此⽂件中。

2. 在HTML 页⾯中，使⽤<link>标签引⼊这个⽂件。

css常用,用法大全

取值：
normal：默认值。正常的字体。
bold：粗体。相当于700。也相当于<b>标签的作用效果。
bolder：比 normal > 粗
url( url ) : 使用绝对或相对 url 地址指定背景图像.
示例：
div{ background-imge: url("img/chunv.jpg")}
注意：引进的背景图片无法撑开盒子的宽高，如要引进背景，必须确保盒子存在宽度和高度。
<标签 class="id名"></标签> 获取方式：.id名{ color:red; }
<p id="p1">这是一段p标签</p> #p1{ color:red; }
4、后代选择器：必须含有两个标签以上，并且存在层级关系，才能使用后代选择器，标签与标签之间用（空格）连接
2、class类选择器：先给标签一个class属性（即给标签设置一个class名），然后通过使用（.class名）的方式获取标签，class名不唯一，可以重复使用，但要注意样式的互相影响
<标签 class="class名"></标签> 获取方式：.class名{ color:red; }
4、在同一组属性设置中标有“!important”规则的优先级最大
1.1.5常见选择器
1、html标签选择器：直接通过获取标签名，来给相对应的标签添加css样式
<p>这是一段p标签</p> 获取方式：p{ color:red; }
语法：
background：#000 ; 引进背景颜色

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

padding:0;
overflow: hidden;
}
.newslist li {
list-style:none;
overflow: hidden;
}
.newstitle{
background:#eee;
padding:0 0 0 15px;
font-size:14px;
line-height: 14px;
border: 1px solid #D0D0D0;
font:11px/normal MingLiu,"微软雅黑",Arial,"宋体",Helvetica,Verdana,Sans-serif;
}
.top_search_btn{
margin:3px 0 0 0;
}
.nav ul{
margin:0 10px 0 0;
padding:0;
li{
float:left;
margin:0 0 0 25px;
list-style:none;
}
.nav ul li a{text-decoration:none; color:#030303;}
}
.inserviceb{
float:left;
line-height:20px;
}
.inserviceb span{
color:#5FB404;
}
/*新闻列表*/
.newslist{
overflow: hidden;
}
.newslist ul{
margin:0;
}
/*顶部通栏普通样式*/
.top_info{
float:right;
margin:0 0 0 10px;
line-height:28px;
color:#888;
}
.top_info a{text-decoration:none; color:#888;}
.top_info a:hover{text-decoration:none;color:#77b300;}
padding:10px 0 0;
font:12px/20px Arial,"宋体",Helvetica,Verdana,Sans-serif;
text-align:justify;
position: relative;
}
.rightc p{
padding:0 0 10px 0;
}
.PageBar .Pagecss a:hover{
background:#8CBF26;
color:#fff;
}
.PageBar .pagecss .current{
font-weight:bold;
margin:0 5px;
}
#clearboth{
clear:both;
color:#77b300;
}
/*页面内容*/
.news-content{
padding:0 0 15px;
font:14px/28px Arial,"宋体",Helvetica,Verdana,Sans-serif;
}
.rightc{
margin:0 0 20px 0;
border:5px solid #8CBF26;
}
.moodtitle{
background:#8CBF26;
margin:0 10px 10px;
padding: 0 10px;
color:#fff;
}
.nextpagea{
float:left;
}
.pags_jump{
float:left;
margin:0 10px;
overflow: hidden;
}
.listpage{
float:left;
}
.listpagego{
float:left;
margin:3px 0 0 0;
margin:0 auto;
width:960px;
height:28px;
text-align: right;
line-height:28px;
font:11px/normal MingLiu,"微软雅黑",Arial,"宋体",Helvetica,Verdana,Sans-serif;
font:12px/38px Arial,"宋体",Helvetica,Verdana,Sans-serif;
color:#aaa;
display: inline;
}
.weizhi a{
color:#aaa;
}
.weizhi a:hover{
text-decoration:underline;
}
.eg{
font-family: Arial,Helvetica,Verdana,Sans-serif;
}
/*顶部通栏*/
.top{
background:url(top_bg.gif) repeat-x #fff;
height:28px;
}
/*顶部通栏面板*/
.top_con{
color:#888;
line-height:20px;
overflow: hidden;
}
/*新闻分页*/
.newspage {
border-top: 1px solid #EEEEEE;
margin: 0;
padding: 10px 15px 0;
overflow: hidden;
}
.rightc img{
max-width:602px;/*--for firefox--*/
}
.rightct{
margin:0 0 0 15px;
font-size: 14px;
font-family: "微软雅黑",Arial,"宋体",Helvetica,Verdana,Sans-serif;
line-height:36px;
}
.newslistdate {
margin:0 0 0 20px;
font-size:12px;
color: #77b300;
}
.newsinfo{
background:#fff;
margin: 10px 0 15px 0;
padding:0 015px;
}
.PageBar, .PageBar *{
font-size: 12px;
line-height: 24px;
text-align: left;
}
.PageBar .Pagecss a{
margin:0 3px;
padding:1px 6px 3px 6px;
border:1px solid #D4E5B1;
font-size:12px;
}
/*单页内容*/
.content{
margin:10px 0 0 0;
min-height:400px;
overflow: hidden;
}
/*单页内容右侧*/
.pageconr{
float: right;
width: 685px;
color:#96c800;
font-size:12px;
font-weight: normal;
}
/*首页案例列表*/
.nextpic_list{
background:#f2f2f2;
margin:2px 0 0 0;
}
/*首页右边*/
.box_right{
float:right;
color: #4B8A08;
position: absolute;
top: -28px;
}
.rightcteg{
font-size: 12px;
font-family: Arial,"宋体";
color:#aaa;
}
/*心情图片*/
.mood{
padding: 0 0 10px 0;
width:395px;
}
/*服务领域*/
.inservicea{
float:left;
margin:0 0 0 15px;
width:210px;
line-height:20px;
display:inline;
}
.inservicea span{
color:#5FB404;
.nav ul li a:hover{text-decoration:none;color:#77b300;}
/*首页banner*/
.topvefla{
background:#000;
height:300px;
}
/*首页内容*/
.topvebox{
margin:15px 0 0 0;
font-family: Arial,"宋体",Helvetica,Verdana,Sans-serif;