3CSS核心基础.pptx

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2019/12/17,#,CSS,核心基础,1,复习常用,HTML,标签,基本,定义,HTML,文档,文档的信息,HTML,文档的元信息,文档的标题文档与外部资源的关系文档的样式信息可见的页面内容,注释,文本,.,标题字大小（,h1h6,）,.,粗体字,.,粗体字,(,强调,).,斜体字,.,斜体字,(,强调,).,下划线,.,删除线,(,表示删除,),居中文本,无序列表,有序列表,列表项目,超链接,定义文本字体尺寸、颜色、大小,下标,上标,换行,段落,图形,定义图像,水平线,1,构造,CSS,规则,2,基本,CSS,选择器,3,在,HTML,中使用,CSS,的方法,4,本章小结,5,主要内容,CSS,层叠样式表,HTML,标签定义了网页元素内容,CSS,定义了显示的样式,1,构造,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,类别,选择器,3,ID,选择器,9,CSS,规则主要由：选择器、属性、属性值,3,部分组成。,标记选择器是声明哪些,HTML,标记,采取哪种,CSS,样式,2.1,标记选择器,h2 ,font-size:24px;color:red;,选择器,属性,值,属性,值,声明,声明,类别选择器的名称可以由,用户自定义,，声明时在选择器名称前加上“,.,”符号,2.2,类别选择器,.c,font-size:24px;color:red;,选择器,属性,值,属性,值,声明,声明,ID,选择器的名称也可以由,用户自定义,，声明时在选择器名称前加上“,#,”符号,2.3 ID,选择器,#ID ,font-size:24px;color:red;,选择器,属性,值,属性,值,声明,声明,CSS,选择器的作用就是从,HTML,页面中找出特定的某类元素。常用的几类,CSS,选择器如,下,表所示。,常用的,CSS,选择器,选择器,代码,示例代码,说明,通用选择器,*,*,选择所有元素。,标签选择器,元素名称,a,、,body,、,p,根据标签选择元素。,类选择器,.,.beam,根据,class,的值选择元素。,id,选择器,#,#logo,根据,id,的值选择元素。,属性选择器,href,、,attr=”val”,根据属性选择元素。,并集选择器,em,strong,同时匹配多个选择器，取多个选择器的并集。,后代选择器,.asideNav li,先匹配第二个选择器的元素，并且属于第一个选择器内。,子代选择器,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,选择,器,3,在,HTML,中使用,CSS,的方法,15,行内,样式,嵌入,样式,链接样式,直接在,HTML,的标记中使用,style,属性,，然,后将,CSS,代码直接写在其中。,3.1,行内样式,页面标题,正文内容,1,正文内容,2,正文内容,3,此方式尽量少使用,将,CSS,样式写在,与,之间，并且用,和,标记进行声明。,3.2,内嵌样式,页面标题,P color:#0000FF;text-decoration:underline;,font-weight:bold;font-size:25px;,这是第,1,行正文内容,这是第,2,行正文内容,（或外部样式表）,实际应用中使用,频率最高、最实用,，它将,HTML,页面本身与,CSS,样式,分离,为两个或多个,文件,。,3.3,链接样式,页面标题,CSS,标题,这是正文内容,CSS,标题,这是正文内容,h2,color:#0000FF;,p,color:#FF0000;,text-decoration:underline;,font-weight:bold;,font-size:15px;,页面标题,p color:blue;,观察文字的颜色,内嵌式,行内样式,多重样式表,3.5,各种方式的优先级问题,行内,样式,嵌入,样式,链接样式,建议：在网站建设中，最好只使用其中的,1-2种，这样既有利于后期的维护和管理，也不会出现各种样式“冲突”的情况，便于设计者理顺设计的整体思路,。,伪类和伪元素,伪类是一种特殊的选择器，用来指定一个或与其相关的选择符的状态。,它的最大的用处就是可以,对链接,在不同状态下定义不同的样式效果。,结构如下：,选择器：伪类,属性：值,如：,a.two:linkcolor:red;,注意：这里的伪类不是任意用户定义的字符；而是已经,预先定义好的,。,W3C,组织定义的标准伪类,：,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,属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。,具体如下：,CSS,字体样式属性,1,、,CSS,字体样式属性,（,2,）,font-family:,字体,font-family,属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下,CSS,样式代码：,可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体,。,p font-family:,微软雅黑,;,使用,font-family,设置字体时，需要注意以下几点：,各种字体之间必须使用英文状态下的逗号隔开。,中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名,之前,。,如果,字体名中包含空格、,#,、,$,等符号，则该字体必须加,英文状态下的,单引号或双引号，例如,font-family:Times New Roman;,。,尽量使用系统默认字体,，保证在任何用户的浏览器中都能正确显示。,1,、,CSS,字体样式属性,（,3,）,font-weight:,字体粗细,font-weight,属性用于定义字体的粗细，其可用属性值,：,normal,、,bold,、,bolder,、,lighter,、,100900,（,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-style font-variant font-weight font-size/line-height font-family;,使用,font,属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。,其中不需要设置的属性可以省略（取默认值），但必须保留,font-size,和,font-family,属性，否则,font,属性将不起作用。,font-face:,CSS3,的新特性，用于定义服务器字体,。,font-facefont-family:myfont;,src:url(font/book.ttf);,pfont-family:myfont;,font-size:4em;,4.CSS,的继承特性,当使用,css,对某个元素设置，该设置会对该元素的,子元素,也会起作用。,除非这些子元素又设置了,不同的格式,属性。,Css,的层叠特性,层叠：解决样式,冲突,问题。,这是第一行文本,这是第二行文本,这是第三行文本,这是第三行文本,行内样式,id,样式,类别样式,标记样式,CSS,选择器,1.,使用多个元素与多个规则,(标记选择器),一个规则用于多个元素,一个元素设置多个规则,TITLE,AUTHOR,p,pmargin:8px,TITLE display:block,TITLE font-size:12pt;font-weight:bold,TITLE font-size:14pt;font-style:italic,P color:blue,CSS,属性与属性值,1.,属性关键字,预先定义的属性关键词来设置元素的显示规则,2.,色彩属性值,1,）使用英文彩色名称,2,）使用名种,RGB,表示方式,3.,尺寸属性值,1,）相对尺寸值,px,（像素点）,em,（,当前字体中字符的高度）,ex,（当前字体中,x,的高度）,2,）绝对尺寸值,in,（英寸）,cm,（厘米）,mm,（毫米）,pt,（磅）,CSS,属性与属性值,相对和绝对的区别？,相对指有条件的、暂时的、有限的、特殊的,绝对指无条件的、永恒的、无限的、普遍的。,像素（,px,）与显示器的分辨率相关。,分辨率越高，像素密度越大。通常这也意味着字体看上去会更小。,CSS,属性 设置,-,字型属性,font-family,设置文字的字体,font-size,设置文字的大小,font-style,设置文字的字型,（是否斜体）,font-weight,设置文字的粗细,font-variant,设置文字字母的大小写,font,字体综合,属性,设置（,font,属性是控制字体样式、大小、风格、浓淡等属,）,注意：字体综合属性,(font),写法顺序为：字体风格,(font-style),、字体变量,(font-variant),、字体浓淡,(font-weight),、字体大小,(font-size),、字体名称,(font-family),、字体颜色,(color),p,font:oblique bold 40px Arial;,color:green;,CSS,属性 设置,-,色彩属性,color,设置文字颜色属性,background-color,设置背景颜色属性,border-color,设置边框颜色属性,CSS,属性 设置,-,边框属性,border-style,设置边框四周的样式,border-color,设置边框颜色属性,border-width,设置整个边框的宽度,border,设置整个边框的样式、颜色和宽度,CSS,的规则是由,选择器,、,属性,和,属性值,三者构成,三,种基本的选择器：,标记,选择器,、,类别,选择器,、,ID,选择器,四,种在,HTML,中使用,CSS,的方式：,行内样式,、,内嵌样式,、,链接样式,、,导入样式,Css,继承和层叠,特性,41,小结：,