下载文档原格式
CCS基础样式表⼀.css样式表1.样式表分类1.内联式<p >This is an apple</p>2.内嵌样式表作为⼀个独⽴的区域内嵌在⽹页⾥⾯，必须写在head标签⾥⾯<style type="text/css>p{text-decoration:underline}</style>3.外部样式表新建⼀个CSS⽂件，然后在HTML⽂件中调⽤此样式表。
在HTML⽂件中邮件——CSS样式——附加样式表。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>优先级⽐较</title><link href="red.css" type="text/css" rel="stylesheet">//链接式-外部样式<style type="text/css">p{//内嵌样式表color: blue;font-size: 20px;}@import url(yellow.css);//导⼊式</style></head><body><p >⾏内样式>链接式>内嵌式>导⼊式(链接式在后⾯)<br/>//⾏内样式---内联式⾏内样式>内嵌式>导⼊式>链接式(链接式在前⾯)<br/>总的规律：后⾯的样式会覆盖前⾯的样式</p></body></html>⼆.选择器1.标签选择器⽤标签名直接做选择器<style type="text/css">p{font-size=14px;}</style>直接作⽤下⾯的p标签<p>GOd is a girl</p>2.class选择器class选择器都是以“.”为开头<head><style type="text/css">.main {height=24px;width=18px;text-align:center;}</style></head><body><div class="main">调⽤的class样式。
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的基础知识和常用属性，以帮助菜鸟入门。
首先，让我们了解一下CSS的基本语法。
CSS由选择器和声明块组成。
选择器指定了要应用样式的HTML元素，而声明块则包含了一系列属性-值对，用于描述要应用到元素上的样式。
下面是一个简单的示例：```p {color: red;font-size: 20px;}```上述代码中，选择器“p”表示要应用样式的HTML段落元素。
声明块中的属性-值对指定了段落的文本颜色为红色，字体大小为20像素。
接下来，我们将介绍一些常用的CSS属性。
1. 字体属性：用于设置文本的字体样式，如字体大小、字体族等。
例如：```p {font-size: 16px;font-family: Arial, sans-serif;}```上述代码将段落的字体大小设置为16像素，字体族为Arial或者sans-serif。
2. 背景属性：用于设置元素的背景样式，如背景颜色、背景图片等。
例如：```body {background-color: lightblue;background-image: url("bg.jpg");}```上述代码将页面的背景颜色设置为浅蓝色，背景图片为名为“bg.jpg”的图片。
3. 边框属性：用于设置元素的边框样式，如边框宽度、边框颜色等。
例如：```div {border: 1px solid black;}```上述代码将`<div>`元素的边框宽度设置为1像素，边框颜色为黑色。
4. 盒模型属性：用于调整元素的尺寸和定位，如元素的宽度、高度、外边距等。
例如：```img {width: 200px;height: 150px;margin-top: 10px;}```上述代码将图片的宽度设置为200像素，高度设置为150像素，并且向上外边距10像素。
css style用法CSS（CascadingStyleSheets）是一种用于网页设计的样式表语言。
它可以控制HTML文档中的元素的外观和布局，使得网页设计更加美观、简洁、易于维护。
在本篇文章中，我们将探讨CSS style用法的基础知识和常见技巧。
基础知识CSS样式表由一系列的规则（rule）组成，每个规则包含一个选择器（selector）和一组声明（declaration）。
选择器用于指定要应用样式的HTML元素，声明则用于定义这些元素的样式。
例如，下面的CSS规则将为所有h1元素设置红色字体、黑色背景和20像素的上下内边距：```cssh1 {color: red;background-color: black;padding: 20px 0;}```在这个例子中，h1是选择器，color、background-color和padding是声明，它们用冒号（:）分隔开来，每个声明以分号（;）结尾。
需要注意的是，CSS规则是区分大小写的，因此h1和H1是不同的选择器。
选择器选择器是指定要应用样式的HTML元素的标识符。
下面是一些常见的选择器类型：1. 元素选择器（Element Selector）：通过HTML元素的名称来指定要应用样式的元素。
```cssp {color: blue;}```这个规则将为所有p元素设置蓝色字体。
2. ID选择器（ID Selector）：通过HTML元素的id属性来指定要应用样式的元素。
```css#header {background-color: gray;}```这个规则将为id为“header”的元素设置灰色背景。
3. 类选择器（Class Selector）：通过HTML元素的class属性来指定要应用样式的元素。
```css.highlight {font-weight: bold;}```这个规则将为所有class为“highlight”的元素设置粗体字。
css基本语法格式CSS（层叠样式表）的基本语法格式如下：1. 选择器（Selector）：选择器用于指定要应用样式的HTML元素。
选择器可以是元素名称、类名、ID、属性等。
例如：元素选择器，p、div、h1等。
类选择器，.classname.ID选择器，#idname.属性选择器，[attribute=value]2. 声明块（Declaration Block）：声明块包含一条或多条属性声明，用花括号{}括起来。
每个属性声明由属性名和属性值组成，中间用冒号:分隔。
例如：css.selector {。
property: value;property: value;}。
3. 属性（Property）：属性是要应用的样式特性，例如颜色、背景、字体等。
例如：颜色属性，color.背景属性，background-color.字体属性，font-size.4. 属性值（Value）：属性值是属性所具有的具体特性。
属性值可以是颜色、大小、字体等。
例如：颜色属性值，red、#000000、rgb(255, 0, 0)。
大小属性值，12px、1em、100%。
5. 分号（Semicolon），每个属性声明后面需要加上分号，用于分隔不同的属性声明。
6. 注释（Comments）：CSS中可以使用注释来对代码进行说明，注释以/开头，以/结尾。
例如：css./ 这是一个注释 /。
下面是一个简单的例子，展示了CSS的基本语法格式：css.selector {。
property: value;property: value;}。
请注意，以上只是CSS基本语法格式的简单介绍，CSS还有很多其他的语法规则和特性，可以根据具体需求进行深入学习和应用。
CSS基础语法1 CSS概述1.1 CSS的定义 全名：Cascading Style Sheets -> 层叠样式表 定义：CSS成为层叠样式表，它主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。
CSS以HTML为基础，提供了丰富的功能（如字体、颜⾊、背景的控制以及整体排版等等），还可以针对不同的浏览器设置不同的样式。
(1) 层叠的概念 CSS—层叠样式表，层叠就是浏览器对多个样式来源进⾏叠加，最终确定结果的过程。
上图中有两个样式来源，第⼀个是引⽤的css1.css，第⼆个是⾃⼰在style中编写的样式。
“层叠”是个叠加的过程，可通过下图表⽰：层叠是CSS的核⼼机制，理解了它才能以最经济的⽅式写出最容易改动的CSS，让⽂档外观在达到设计要求的同时，也给⽤户留下⼀些空间，让他们根据需要更改⽂档的显⽰效果，例如调整字号。
(2) 层叠的规则 由于样式的来源不同，浏览器在加载样式时，需要计算出最终的样式值，这样才能显⽰出正确的界⾯效果——浏览器会通过叠加和覆盖这两种⽅式来⽣成最终的样式值。
如上图，不同来源的两个样式，第⼀个样式设置了font-weight，第⼆个没有，浏览器会把它叠加在⼀起，即浏览器会把各个零散的整合成⼀个整体。
第⼀个样式color:red，第⼆个样式color:blue，浏览器会让后者覆盖前者，最终结果还是color:blue。
覆盖的默认规则是后者覆盖前者，但是⼜⼀个特殊情况——!important。
如上图。
虽然color:blue是后来者，但是它没有居上，因为前者color:red跟着!important。
这就像得到⼀个尚⽅宝剑，有最⾼执⾏权，其他⼈统统让路，否则佛挡杀佛。
1.2 HTML、CSS与JS三者的关系 HTML：页⾯结构，负责从语义的⾓度搭建页⾯结构。
CSS：页⾯样式表现，负责从审美的⾓度美化页⾯。
层叠样式表（CSS）“层叠样式表”（Cascading Style Sheets,缩写为CSS）是由W3C协会所制定，主要的用途是定义网页数据的编排、显示、格式化及特殊效果，因为HTML提供的<B>、<I>、<FONT>、<H1>、<P>、<SUB>、<SUP>等控制标记虽然可以将数据格式化，但能做到的格式化有限，而CSS正好弥补了这个不足。
CSS属于较新技术，故IE3.0版本以上支持，Netscapt Navigator 4.0版以上支持。
此外，不同浏览器显示的结果可能有不同。
一、如何链接HTML文件与层叠样式表它有4种方法：●在HTML文件的<HEAD>区块嵌入层叠样式表的定义。
●将层叠样式表定义在单独的文本文件，然后将之导入或链接至HTML文件。
●在HTML文件的标签属性style中加入样式定义●在HTML文件中套用样式类别。
1．在HTML文件的<HEAD>区块嵌入层叠样式表的定义<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title><style type="text/css"><!--body {font-family: "宋体";font-size: 14px;color: #0000FF;}--></style></head><body></body></html>2．将层叠样式表导入或链接至HTML文件只有IE浏览器支持。
先看下面导入样式表：<HTML><HEAD><TITLE>样式表2</TITLE><STYLE><!-@import url(body.css);--></STYLE></HEAD><BODY>将样式表定义在独立的文本文件body.css中，然后嵌入HTML文件。
这个样式表所定义的字体为宋体、大小为30点、颜色为Blue。
</BODY></HTML>其BODY.CSS文件内容：BODY {font-family: "宋体";font-size=30;color:blue}再看链接样式表：<HTML><HEAD><TITLE>样式表3</TITLE><LINK REL="StyleSheet" HREF="body.css" TYPE="text/css"></HEAD><BODY>将样式表定义在独立的文本文件body.css中，然后链接至HTML 文件。
这个样式表所定义的字体为宋体、大小为30点、颜色为Blue。
</BODY></HTML>3．在HTML文件中套用样式类别您也可以在样式表文件中定义不同的样式类别（Style Class），然后在HTML文件中套用不同的样式类别。
<HTML><HEAD><TITLE>样式表4</TITLE><STYLE><!-P.opening {font-family:"宋体";font-size:"30" ;color:"Maroon"}P.content {font-family:"宋体";font-size:"20";color:"Olive"}P.end {font-family:"宋体";font-size:"20";color:"black"}.note1 {color:Green}.note2 {color:Blue}--></STYLE></HEAD><BODY><P CLASS="opening">蝶恋花</P><BLOCKQUOTE><P CLASS="content">庭院深深深几许？杨柳堆烟，帘幕无重数。
玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮，门掩黄昏，无计留春住。
泪眼问花花不语，乱红飞过秋千去。
</P></BLOCKQUOTE><P CLASS="end">宋 欧阳修</P><DIV CLASS="note1">注释1：章台路意指歌妓聚居之所。
<BR></DIV>注释2：<SPAN CLASS="note2">“冶游生春露”</SPAN>,冶游、游冶即春游。
</BODY></HTML>4．在HTML文件中加入样式定义在HTML文件中加入样式定义，必须用到Style属性。
举例如下：<HTML><HEAD><TITLE>样式表5</TITLE></HEAD><BODY><P STYLE="font-family:宋体;font-size:30;color:Maroon">蝶恋花</P><BLOCKQUOTE><P STYLE="font-family:宋体;font-size:20;color:Olive"> 庭院深深深几许？杨柳堆烟，帘幕无重数。
玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮，门掩黄昏，无计留春住。
泪眼问花花不语，乱红飞过秋千去。
</P></BLOCKQUOTE><P STYLE="font-family:宋体;font-size:20;color:black">宋 欧阳修</P><DIV STYLE="color:Green">注释1：章台路意指歌妓聚居之所。
<BR></DIV>注释2：<SPAN STYLE="color:Blue">“冶游生春露”</SPAN>，冶游、游冶即春游。
</BODY></HTML>二、如何定义层叠样式表：我们先来简单的说说层叠样式表的结构：样式区块：指的是<style>…</style>标记和<!-- -->注释标记所成的区块。
加上注释标记的原因是考虑到万一碰到不支持样式表的浏览器，那么样式表定义会被当成注释，而不会产生错误。
选择器（Selector）：指的是html组件，也可以理解为html里的标记，例如：P就是一个选择器，所代表的意义为段落。
声明（Declaration）：指的是HTML组件的样式，例如颜色、字体、对体方式等。
例如P{color:”blue”}的意义是声名段落文字为蓝色（Blue）。
请注意：若设置由英文字母、数字（0~9）、减号（-）或小数点（.）所组成，那双引号可以省略。
类别（Class）：指的是对HTML文件中某些组件所特别设计的样式定义，例如，P.green{color:”blue”}的意义声名一个Class样式类别，这个样式类别会将段落的文字颜色设置为绿色（green）。
技巧1：如果您所定义的选择器拥有一个以上的声明，那么这些声明放在{}之间，而且声明之间用分号“;”隔开，例如P{text-indent:50;line-height:150%}是声明一个选择器P，使段落的首行缩排50像素、行距1.5行。
技巧2：如果您定义的选择器不止一个，那么建议您将每个选择器的定义放在不同的行中，以便阅读，例如：P{text-indent:50;line-height:150%}H1{color:blue;background:yellow}Address{color:green }在前面的例子中，我们都使用颜色名称来设置颜色，事实上，您也可以使用#RRGGBB、rgb(RR,GG,BB)等方式来制定颜色。
举例如下：H1{color:green}H1{color:#00ff00 }H1{color:rgb(0,255,0)}H1{color: rgb(0%,100%,0%)}此外，我们使用了如像素点等度量单位，事实上，除了像素点之外，样式表还提供如表所示的度量单位。
层叠样式表所提供的样式可以分成下列7种：字体样式（Font Property）、文字文本样式（Text Property）、背景样式（Background Property）、区块样式（Box Property）、分类样式（Classification Property）、滚动条样式（Scrollbar Property）、鼠标样式（Cursor Property）。
1．设置字体样式（属性）：用来设置字体、大小、行距、粗体、斜体等样式。
其中字体样式可分为：（1）文字字体Font-Familybody{font-family:宋体,黑体,仿宋体}（2）文字样式Font-Style这个样式的属性值有：normal（正常）、oblique（粗体）、italic（斜体）等（3）小型大写字样式Font-V ariant这个样式的属性值有：normal（正常）、small-caps（小型大写字）等两种设置，例如：H1{font-variant: small-caps }这个语句意义是令HTML文件的标题1文字显示为小型大写字（注：小型大写字就是以较小的字体但大写的方式来显示小写的英文字母）。
（4）文字大小样式Font-SizeFont-Size样式指定文字大小（5）文字粗细样式Font-Weight（6）文字行距样式Line-Height（7）Font样式Font样式是Font-Family、Font-Style、Font-V ariant、Font-Size、Font-Weight等样式的综合表示法。
