css样式基本知识练习题_第1页
css样式基本知识练习题_第2页
css样式基本知识练习题_第3页
css样式基本知识练习题_第4页
css样式基本知识练习题_第5页
免费预览已结束，剩余1页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、cssW式基本知识一、CSSK心基础如果希望网页美观、大方，并且升级轻松、维护方便，就需要使用CSS实现结构与表现的分离。1. csS羊式规则属性1:属性值1；属性2:属性值2;属性3:属性值3;在上面的样式规则中， 用于指定CSS羊式作用的HTML对象，花括号内是对该对象 设置的具体样式。其中，属性和属性值以“键值对”的形式出现，用英文“：”连接，多个“键值对"之间用英文“；”进行区分。2. 引入CSS羊式表的方式有哪些？(1)行内式也称为内联样式，是通过 的 属性来设置元素的样式。语法格式< ="属性1:属性值1；属性2:属性值2;属性3:属性值3;"&

2、gt;内容</>并没有做到结构与表现的分离，所以一般很少使用。 通常，只有在样式规则较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。(2)内嵌式内嵌式是将 CSS代码集中写在 HTML文档的 头部标记中，并且用 标记定义。语法格式<>< type="text/css">选择器属性1：属性值1；属性2:属性值2;属性3:属性值3;</></>内嵌式CSS羊式只对其所在的 HTML页面生效，因此，仅设计一个页面时，使用内嵌式是个 不错的选择。但如果是一个网站，不建议使用这种方式，因为它不能充分发挥 CS

3、S弋码的重 用优势。(3)链入式链入式是将所有的样式放在一个或多个以 为扩展名的外部样式表文件中， 通过< />标记将外部样式表文件链接到HTML文档中。语法格式<head>< ="CSS文件的路径" ="text/css" ="stylesheet" /> </head>链入式最大的 好处是同一个CSS羊式表可以被不同的HTML页面链接使用，同时一个HTML 页面也可以通过多个</>标记链接多个CSS羊式表。链入式是使用频率最高，也最实用的CSS羊式表。它将HTML代码与C

4、SS弋码分离为两个或 多个文件，实现了结构和表现的完全分离，使得网页的前期制作和后期维护都十分方便。3. 什么是CSS基础选择器？要想将CSS羊式应用于特定的 HTML元素，首先需要找到该目标元素。在 CS汕，执行这一 任务的样式规则部分被称为选择器。(1)标记选择器标记选择器是指用 HTML 称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS羊式。语法格式属性1：属性值1；属性2:属性值2;属性3:属性值3; 标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点， 不能设计差异化样式。(2)类选择器类选择器使用“ "(英文)进行标识，后面紧跟类

5、名。 语法格式属性1：属性值1；属性2:属性值2;属性3:属性值3; 类选择器最大的优势是可以为元素对象定义单独或相同的样式。多个标记可以使用同一个类名，这样可以为不同类型的标记指定相同的样式。同时，一个HTML元素也可以应用多个 class类，设置多个样式。 类名的第一个字符不能使用数字， 并且严格区分大小写，一般采用小写的英文字符。id选择器id选择器使用“ ”进行标识，后面紧跟 id名，其基本语法格式如下： 语法格式属性1:属性值1;属性2:属性值2;属性3:属性值3; 该语法中，id名即为HTML元素的id属性值，大多数 HTML元素都可以定义id属性，元素 的id值是唯一的，只能对应

6、于文档中某一个具体的元素。同一个id可以应用于多个标记，浏览器并不报错，但是这种做法是不被允许的，因为JavaScript等脚本语言调用id时会出错。但是，最后一行没有应用任何CSS羊式，这意味着id选择器不支持像类选择器那样定义多个值，类似"id="bold font22" ”的写法是完全错误的。(4)通配符选择器通配符选择器用“”号表示，它是所有选择器中作用范围最广的，能匹配页面中所 有的元素。语法格式属性1:属性值1;属性2:属性值2;属性3:属性值3; 二、CSS空制文本样式学习HTML时，可以使用文本样式标记及其属性控制文本的显示样式，但是这种方式繁琐且

7、不利于代码的共享和移植。为此，CSSf供了相应的文本样式属性。1. CSS?体样式属性为了更方便的控制网页中各种各样的字体，CS限供了一系列的字体样式属性。属性用于设置字号。属性用于设置字号，该属性的值可以使用相对长度单位，也可以 使用绝对长度单位。属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。注意：(1)可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会 尝试下一个，直到找到合适的字体。(2)各种字体之间必须使用英文状态下的逗号隔开。(3)中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字 体时，英文字体名必须位于中文字体名之前。

8、(4)如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号, 例如: "Times New Roman"。属性用于定义字体的粗细。般用于定义小型大写字母,O(5)尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。属性用于设置变体(字体变化) 仅对英文字符有效。属性值为：normal :默认值，浏览器会显示标准的字体；small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写；但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。属性用于定义字体风格。如设置斜体、倾斜或正常字体。normal :默认值，浏览器会显

9、示标准的字体样式；:浏览器会显示斜体的字体样式；oblique :浏览器会显示倾斜的字体样式；属性用于对字体样式进行综合设置。选择器font: font-style font-variant font-weight font-size/line-height font-family;使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。其中不需要设置的属性可以省略(取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用。2. CSSC本外观属性属性用于定义文本的颜色，其取值方式有如下3种：?预定义的颜色值，如 red, green,

10、blue等。? ,如#550000, #FF6600, #29D794等。实际工作中，十六进制是最? RGB代码，如红色可以表示为 rgb（255,0,0）或rgb（100%,0%,0%）。属性用于定义字间距，所谓字间距就是字符与字符之间的空白。?属性，其属性值可为不同单位的数值，允许使用负值，默认为normal。属性用于定义英文单词之间的间距，对中文字符无效。? 属性用于定义英文单词之间的间距，和 letter-spacing 一样，其 属性值可为不同单位的数值，允许使用负值，默认为normal。属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂 直间距，一般称为行高。? 常用的

11、属性值单位有三种，分别为像素px,相又直em和百分比,实际工作中使用最多的是像素 。属性用于设置文本内容水平对齐，相当于html中的align对齐属性。其可用属性值如下：? :左对齐（默认值）? :右对齐。? :居中对齐。属性用于控制英文字符的大小写。? none:不转换（默认值）。? :首字母大写。? uppercase:全部字符转换为大写。? lowercase ：全部字符转换为小写。属性用于设置文本的下划线，上划线，删除线等装饰效果。其可用属性值如下：? none :没有装饰（正常文本默认值）。? :下划线。? overline :上划线。? line-through :删除线。? 另外

12、，text-decoration后可以赋多个值，用于给文本添加多种显示效果，例如希望文字同时有下划线和删除线效果，就可以将underline和line-through同时赋给text-decoration 。属性用于设置首行文本的缩进。其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比 , 允许使用负值，建议使用em作为设置单位。通过 属性可以设置文本不同单位的首行缩进效果，而与字号大小无关。注意：属性仅适用于块级元素，对行内元素无效。属性可设置空白符的处理方式。其属性值如下：? normal :常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动 换

13、行。? pre：预格式化，按文档的书写格式保留空格、空行原样显示。? nowrap：空格空行无效，强制文本不能换行， 除非遇到换行标记br/。内容超出元 素的边界也不换行，若超出浏览器页面则会自动增加滚动条。css颜色值的缩写十六进制颜色值是由#开头的6位十六进制数值组成，每 2位为一个颜色分量，分别表示颜色的红、绿、蓝 3个分量。当3个分量的2位十六进制数都各自相同时，可使用 CSS1写， 例如#FF6600可缩写为 , #FF0000可缩写为, #FFFFFET缩写为。 使用颜色值的缩写可简化 CSS弋码。CSS定义背景颜色:背景颜色属性?颜色值，例：red、yellow?,例：#ccc?

14、 rgb(r,g,b) rgb(30,0,0)的默认值为transparent,即背景透明，这时子元素会显示其父元素的背景。三、CSS!级特性仅仅学习CSS基础选择器、CSS控制文本样式，并不能良好地控制网页中元素的显示样式。想要使用CS弦现结构与表现的分离，解决工作中出现的 CSS调试问题，就需要学习CSS高级特性。1. CS弥合选择器标签指定选择器标签指定式选择器又称交集选择器，由 构成，其中第一个为,第二个为 或,两个选择器之间不能有空格，如 h3.special或p#one。后代选择器后代选择器用来选择元素或元素组的后代，其写法就是把 写在前面，写在后面，中间用 分隔。当标记发生嵌套时

15、， 就成为 的后代。后代选择器不限于使用两个元素，如果需要加入更多的元素，只需在元素之间加上空格即可。并集选择器并集选择器是各个选择器通过 连接而成的，任何形式的选择器都可以作为并集选择 器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。使用并集选择器定义样式与对各个基础选择器单独定义样式效果完全相同，而且这种方式书写的CSS弋码更简洁、直观。2. CSS©叠性与继承性所谓层叠性是指多种 CSS羊式的叠加。所谓继承性是指书写 CSS羊式表时，子标记会继承父标记的某些样式，如文本颜色和字号。并不是所有的CSS属性都可以继承，例如，下面的属性就不具有

16、继承性：边框属性、定位属性、内/外边距属性、布局属性、背景属性、元素宽高属性3. CSSffi先级思考：网页制作时，对统一元素，应用不同的背景，会出现什么情况？定义CSS羊式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。<p class="father" id="header" ><strong class="blue”> 文本的颜色 </strong></p>对应的权重值：p strong color:black/* 权重为：1+1*/strong.blue color:green;/* 权重为：1+10*/.father strong color:yellow/* 权重为：+*/p.father strong color:orange;/* 权重为：+*/p.father .blue color:gold;/* 权重为：+*/#header strong color:pink;/* 权重为：100+1*/#header strong.blu

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论