3、CSS核心基础

CSS核心基础1基本html…/htmlhead…/headmetatitle…/titlelinkstyle…/stylebody…/body!--…--定义HTML文档文档的信息HTML文档的元信息文档的标题文档与外部资源的关系文档的样式信息可见的页面内容注释文本h1.../h1标题字大小（h1~h6）b.../b粗体字strong.../strong粗体字(强调)i.../i斜体字em.../em斜体字(强调)u.../u下划线del.../del删除线(表示删除)center…/center居中文本ul…/ul无序列表ol…/ol有序列表li…/li列表项目ahref=”…”…/a超链接font定义文本字体尺寸、颜色、大小sub下标sup上标br换行p段落图形imgsrc=’”…”定义图像hr水平线1构造CSS规则2基本CSS选择器3在HTML中使用CSS的方法4本章小结5层叠样式表HTML标签定义了网页元素内容CSS定义了显示的样式7张飞{身高:185cm;体重:105kg;性别:男;性格:暴躁;民族:汉族;}2级标题{字体:华文云彩;大小:24像素;颜色:红色;装饰:下划线;}h2{font-family:华文云彩;font-size:24px;color:red;text-decoration:underline;}这是定义2级标题CSS样式后的文字效果初学者在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构中的几个特点，具体如下：•CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。为了提高代码的可读性，书写CSS代码时，通常会加上CSS注释。在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。因此，可以使用空格键、Tab键、回车键等对样式代码进行排版，提高代码的可读性。属性的值和单位之间是不允许出现空格的。1标记选择器2类别选择器3ID选择器9CSS规则主要由：选择器、属性、属性值3部分组成。标记选择器是声明哪些HTML标记采取哪种CSS样式h2{font-size:24px;color:red;}选择器属性值属性值声明声明类别选择器的名称可以由用户自定义，声明时在选择器名称前加上“.”符号.c{font-size:24px;color:red;}选择器属性值属性值声明声明ID选择器的名称也可以由用户自定义，声明时在选择器名称前加上“#”符号#ID{font-size:24px;color:red;}选择器属性值属性值声明声明–CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。•常用的CSS选择器选择器代码示例代码说明通用选择器**{}选择所有元素。标签选择器元素名称a{}、body{}、p{}根据标签选择元素。类选择器.类名.beam{}根据class的值选择元素。id选择器#id值#logo{}根据id的值选择元素。属性选择器[条件][href]{}、[attr=”val”]{}根据属性选择元素。并集选择器选择器,选择器em,strong{}同时匹配多个选择器，取多个选择器的并集。后代选择器选择器选择器.asideNavli{}先匹配第二个选择器的元素，并且属于第一个选择器内。子代选择器选择器选择器ulli{}匹配匹配第二个选择器，且为第一个选择器的元素的后代。兄弟选择器选择器+选择器p+a{}匹配紧跟第一个选择器并匹配第二个选择器的元素，如紧跟p元素后的a元素。伪选择器::伪元素或:伪类p::first-line{}、a:hover{}伪选择器不是直接对应HTML中定义的元素，而是向选择器增加特殊的效果。伪选择器比较特殊，分为两种伪元素和伪类两种。CSS选择器元素名描述::first-line匹配文本块的首行。如p::first-line表示选中p元素的首行。::first-letter匹配文本内容的首字母。::before在选中元素的内容之前插入内容。::after在选中元素的内容之后插入内容。元素名描述:root选择文档中的根元素，通常返回html。:first-child父元素的第一个子元素。:last-child父元素的最后一个子无素。:only-child父元素有且只有一个子元素。:only-of-type父元素有且只有一个指定类型的元素。:nth-child(n)匹配父元素的第n个子元素。:nth-last-child(n)匹配父元素的倒数第n个子元素。:nth-of-type(n)匹配父元素定义类型的第n个子元素。:nth-last-of-type(n)匹配父元素定义类型的倒数n个子元素。:link匹配链接元素。:visited匹配用户已访问的链接元素。:hover匹配处于鼠标悬停状态下的元素。:active匹配处于被激活状态下的元素，包括即将点击（按压）。:focus匹配处于获得焦点状态下的元素。:enabled(:disabled)匹配启用（禁用）状态的元素。:checked匹配被选中的单选按钮和复选框的input元素。:default匹配默认元素。:valid(:invalid)根据输入数据验证，匹配有效（无效）的input元素。:in-range(out-of-range)匹配在指定范围之内（之外）受限的input元素。伪类选择器伪元素选择器案例代码（详见教材demo1-1）CSS选择器15行内样式嵌入样式链接样式直接在HTML的标记中使用style属性，然后将CSS代码直接写在其中。htmlheadtitle页面标题/title/headbodypstyle=“color:red;text-decoration:underline;正文内容1/ppstyle=“color:red;text-decoration:underline;正文内容2/ppstyle=“font-size:25px;font-weight:bold;正文内容3/p/body/html此方式尽量少使用将CSS样式写在head与/head之间，并且用style和/style标记进行声明。htmlheadtitle页面标题/titlestyletype=text/cssP{color:#0000FF;text-decoration:underline;font-weight:bold;font-size:25px;}/style/headbodyp这是第1行正文内容……/pp这是第2行正文内容……/p/body/html（或外部样式表）实际应用中使用频率最高、最实用，它将HTML页面本身与CSS样式分离为两个或多个文件。htmlheadtitle页面标题/titlelinkhref=07-07.csstype=text/cssrel=stylesheet/headbodyh2CSS标题/h2p这是正文内容……/ph2CSS标题/h2p这是正文内容……/p/body/htmlh2{color:#0000FF;}p{color:#FF0000;text-decoration:underline;font-weight:bold;font-size:15px;}htmlheadtitle页面标题/titlelinkhref=07-07.csstype=text/cssrel=stylesheetstyletype=“text/css”p{color:blue;}/styleheadbodypstyle=“color:gray;”观察文字的颜色/p/body/html内嵌式行内样式多重样式表行内样式嵌入样式链接样式建议：在网站建设中，最好只使用其中的1-2种，这样既有利于后期的维护和管理，也不会出现各种样式“冲突”的情况，便于设计者理顺设计的整体思路。伪类是一种特殊的选择器，用来指定一个或与其相关的选择符的状态。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。结构如下：选择器：伪类{属性：值}如：a.two:link{color:red;}注意：这里的伪类不是任意用户定义的字符；而是已经预先定义好的。：link未被访问过的链接：visited已访问过的链接：hover鼠标经过时对对象元素表现的样式：active:focus为焦点元素加上指定样式:first-child将特殊的样式添加到元素的第一个子元素:lang定义指定的元素中使用的语言注意：按照a:link，a:visited，a:hover，a:actived的顺序书写:first-letter将样式应用到文本的首字符:first-line将样式添加到文本的首行:before在某个元素前插入内容:after在某个元素后插入内容（1）font-size:字号大小font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。具体如下：1、CSS字体样式属性（2）font-family:字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。p{font-family:微软雅黑;}使用font-family设置字体时，需要注意以下几点：各种字体之间必须使用英文状态下的逗号隔开。中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family:TimesNewRoman;。尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。1、CSS字体样式属性（3）font-weight:字体粗细font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。（4）font-variant:变体font-variant属性用于设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效。其可用属性值如下：normal：默认值，浏览器会显示标准的字体。•small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。1、CSS字体样式属性（5）font-style:字体风格font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：normal：默认值，浏览器会显示标准的字体样式。italic：浏览器会显示斜体的字体样式。oblique：浏览器会显示倾斜的字体样式。1、CSS字体样式属性（6）font:综合设置字体样式font属性用于对字体样式进行综合设置，其基本语法格式如下：选择器{font:font-stylefont-variantfont-weightfont-size/line-heightfont-family;}使用font属性时，必须按上面语法格式中的顺序书写，各