网站前端开发 课件 第3章 认识CSS样式.pptx

商务网页制作技术Powerpoint is a complete presentation graphic packagit gives you everything you need to produce日期：201x/xx/xx1CSS样式的语法格式目录/contentCSS注释代码23CSS的三种样式关于选择器4课堂案例为蓝框部分加背蓝色景色。红框部分加红色背景。设置两首古诗的标题为字体为红色，并加粗。设置作者字体为黄色课堂案例 CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如我们第一张所说，给网页穿上外衣。CSS样式比如文字大小、颜色、字体加粗等。关键代码如下。p{ font-size:20px; color:red; font-weight:bold;} 使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。CSS样式的语法格式CSS样式为什么使用CSS样式来设置网页的外观样式呢？我们需要把一个标题黄鹤楼颜色设置为红色，字体大小设置为20px。在CSS样式中，关键代码如下。 h1{ color: red; /*字体颜色*/ font-size:20px; /*字体大小*/} 大家会发现，上述代码使得浏览器中的代码变成红色了。CSS 样式由选择符和声明组成，而声明又由属性和值组成，CSS代码语法如图 1-1所示。 选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中使网页中所有的段落（h1）的文字将变成红色，而其他的元素不会受到影响。声明：在英文大括号“｛｝”中的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，关键代码如下。p{font-size:20px;color:red;}注意： 1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。 2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，关键代码如下。p{ font-size:20px; color:red; }CSS注释代码CSS注释代码就像在HTML的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（HTML中使用!--注释语句--)，关键代码如下。h1{ color: red; /*字体颜色*/ } CSS的三种样式 CSS样式CSS样式可以写在哪些地方呢？从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。[1] 内联式css样式，直接写在现有的HTML标签中内联式，就是css样式表相当于把css代码直接写在现有的HTML标签中，关键代码如下。h1 style=color:red这里文字是红色。/ h1注意要写在元素的开始标签里，下面这种写法是错误的： h1这里文字是红色。/ h1 style=color:red并且css样式代码要写在style=双引号中，如果有多条css样式代码设置可以将它们写在一起，中间用分号隔开，关键代码如下。 h1 style=color:red;font-size:20px这里文字是红色。/ h1嵌入式css样式[2] 嵌入式css样式，写在当前的文件中 现在有一任务，需要把网页中所有的h1标签的字体修改为18号。如果用内联式CSS样式的方法进行设置将是一件很麻烦的事情（为每一个h1标签加入style=font-size:18px语句），本小节讲解一种新的方法用嵌入式CSS样式来实现这个任务。 嵌入式CSS样式，就是可以把CSS样式代码写在style type=text/css/style标签之间。如下面代码实现把h1标签中的文字设置为红色，关键代码如下。style type=text/css h1{ color:red; } /style 嵌入式CSS样式必须写在h1/h1之间，并且一般情况下嵌入式CSS样式写在head/head之间。外部式CSS样式[3] 外部式CSS样式，写在单独的一个文件中 外部式CSS样式(也可称为外联式)就是把CSS代码写在一个单独的外部文件中，这个CSS样式文件以“.css”为扩展名，在head内使用link标签将CSS样式文件链接到HTML文件内，关键代码如下。link href=base.css rel=stylesheet type=css/style.css /注意：外部式css样式，写在单独的一个文件中·总结· 1、CSS样式文件名称以有意义的英文字母命名，如 main. css。 2、rel= stylesheet type=text/css 是固定写法不可修改。 3、link标签位置一般写在head标签之内。三种方法的优先级[4] 三种方