HTML基础___CSS样式表_

学习内容:

1.CSS简介

2.CSS的简单运用

3.CSS__字体属性

4.CSS__颜色及背景属性

1.CSS简介

CSS------Cascading Style Sheet的缩写,译为:层叠样式表 or 级联样式表即样式表.

样式表的功能:

灵活控制网页中文字的字体,颜色,大小,间距,风格,位置.

随意设置一个文本块的行高,缩进,并可以为其加入三维效果的边框.

更方便地为网页中的任何元素设置不同的背景颜色和背景图片.

精确控制网页中各元素的位置.

可为网页中的元素设置各种过滤器,从而产生如阴影,辉光,模糊和透明等效果.

可以结合脚本语言,使网页中的元素产生各种动态效果.

CSS的特点:

减少图形文件的使用.

集中管理样式信息.

共享样式设定

将样式分类使用.多个文件可使用同一个CSS样式文件,一个文件上也可以同时使用我个CSS文件.如果样式冲突,浏览器根据愉下规则显示样式属性:

如果在同一文件中应用两种样式时,浏览器显示出两种样式中除冲突属性之外的所有属性.

如果在同一文件中应用两种样式是相互冲突的,浏览器显示出最里面的样式属性.

如果存在直接冲突,自定义样式的属性(class属性的样式)将覆盖HTML标记样式的属性.

2.CSS的简单运用

CSS的基本语法: 选择符{样式属性:取值;样式属性;取值;....}

如 : body{color;black} 实现功能是将页面中的文字显示为黑色.

CSS的选择符:

一. 类选择符

用类选择符可以把相同的元素分类定义成不同的样式.定义选择符时,在自定类名称的前面加一个句点 ( . )

类选择符的语法:标记名.类名{样式属性:取值;样式属性:取值;........}

例:p.red{color:red}

p.black{color:black}

在这段代码中,定义了段落选择符P的red和black两个类,red和black就可以称为类选择符.

类的名称可以是任意英文单词或以英文开头与数字的组合.

值得注意的是.类选择符在实际应用中,可以省略HTML标记名,也就是实例中的P,直接写成下面的代码: .red{color:red} .black{color:black} 这段代码定义了样式,并没有应用样式.如果要应用样式中的red类,还需要在正文中添加如下代码: <p class=red> 要应用black样式同样要添加<p class=black>.

二.ID选择符

在HTML/XML中,在需要惟一标识一个元素时,就会赋予它一个id标识,以便在整个文档中快速找到这个元素.而ID选择符则用来对这个单一元素定义单独的样式.定义方法和类选择符大同小异.只是把句号. 改成井号＃而在调用类时需要把class换成id.

ID选择符语法:标记名#标识名{样式属性:取值;样式属性:取值;......}

例：定义＃exam{color:#ff0000} 引用 <p id="exam">

ＩＤ选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用．

三.包含选择符

包含选择符也称为联选择符，是对某种元素包含关系（对元素１里包含元素２）定义的样式表．这种方式只对在元素１里的元素２定义，对单独的元素１或元素２无定义．

例：table a{font-size:12px}

这段代码只对表格内的链接文字有效，设定了文字大小为１２像素，而对于表格外的链接文字则不起作用．

添加CSS的方法

1.链入外部样式表

把样式表单独保存为一个文件,然后在页面中用<link>标记链接,而<link>标记必须放页面的<head>区域内.

语法:<link rel="styleshee" type="text/css" href="样式表文件的地址">

rel="styleshee"指在页面中使用的是外部样式表.

type="text/css"是指文件的类型是样式表文本.

href参数则用来设定文件的地址.可以是绝对地址或相对地址.

样式表文件扩展名.css 其内容就是定义的样式,不包含HTML的标记,如:

hr{color:#000ff}

p{color:black;font-famil:"宋体"}

2.内部样式表

内部样式表是把样式表的内容直接放到页面的<head>区域里,通过<stle>标记插入.

语法: <style type="text/css">

选择符{样式属性:取值;样式属性:取值;....}

.......................

</style>

由于有些低版本的浏览器不能识别style标记,因此使用HTML语言的注释语句来隐藏样式表的定义内容.写成

语法: <style type="text/css">

<!--

选择符{样式属性:取值;样式属性:取值;....}

.......................

-->

</style>

3.导入外部样式表

导入外部样式表是指内部样式表的<style>区域里引用一个外部的样式表文件,导入里需要使用@import声明

语法:<style type="text/css">

@import url(样式表地址)

选择符{样式属性:取值;样式属性:取值;....}

.......................

</style>

4.内嵌样式

内嵌样式是混合在HTML标记里使用的,用这种方法可以很直观的对某个元素直接定义样式,内嵌样式的使用是直接在HTML标记里加入<style>参数.

语法:< HTML标记 style="样式属性:取值;样式属性:取值;...."}

书写CSS的注意事项

1.如果属性的值是多个单词组成,则必须使用引号将属性值括起来.

2.如果要对一个选择符指定多个属性,则需要使用分号将所胡的属性和值分开.

3.可以将具有相同属性的值勤的先择符组合起来,用逗号将其分开.

如:p,table{font-size:9pt} td,body,div{font:13px arial,sans-serif,宋体}

4.CSS样式表中的注释语句以:"/*"开头,以"*/"结尾. C语言好像也是这么注释的.:)

3.CSS__字体属性

设置字体 ____font-famlily

语法:font-famlily:"字体1","字体2",..

设置字号 ____font-size

语法:font-size:大小取值

取值范围:绝对大小:xx-smail \ x-smll \ small \ medium \ large \ x-large \ xx-large

相对大小: larger \ smaller

长度值或百分比

长度值是由浮点数字和单位标识符组成的长度值.单位:pt(点,1点=1/72英寸) \px(像素),in(英寸)等.

设置字体风格_____font-style

语法:font-style:样式的取值

样式的取值范围: normal(正常显示) ___italic(斜体显示)___ oblique(偏斜体显示)

设置加粗字体_____font-weight

语法:font-weight: 字体粗度值

取值范围: normal正常显示bold粗体bolder特粗体lighter特细体number 数字100-900

小型的大写字母___font-variant

语法:font-variant:取值

取值范围:normal正常small-caps英文显示为小型的大写字母体.

复合属性:字体____font

语法:font:字体取值

字体取值可以包含字全\体族科,字体大小,字体风格,加粗字体,小型大写字母.之间用空格相连 .如h2{font:bolder italic 14pt 黑体}

4.CSS__颜色及背景属性

颜色属性设置___color

语法:color:颜色取值

背景颜色____background-color

语法:background-color:颜色取值

背景图像___background-p_w_picpath

语法:background-p_w_picpath:url(图像地址)

背景重复____background-repeat

语法:background-repeat:取值

取值范围:repeat 图像在纵向和横向上平铺

no-repeat 图像不平铺

repeat-x 图像在水平方向上平铺

repeat-y 图像在垂直方向上平铺

背景附件___backrgound-p_w_upload

语法:background-p_w_upload:取值

取值范围: scroll图像是随对像内容滚动. 默认

fixed图像是固定在页面上静止不动的.

背景位置____background-position

语法:background-position:位置取值

取值范围:百分比,长度top center bottom 纵向的关键字既顶端,居中,底端

left center right 横向的关键字,既左,中,右

复合属性:背景___background

语法:background:取值

和字体font属性类似.它也可以包含背景颜色,背景图像,重复属性,附件属性,背景位置.用空格相连如:body{background:url(pic22.jpg) no-repeat right bottom}

转载于:https://blog.51cto.com/iixox/32202

HTML基础_CSS样式表上第九天相关推荐

[19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
HTML基础--CSS样式表（一）
1.CSS内部样式一般会写在<heaad>标签中 <!DOCTYPE html> <html lang="en"> <head>& ...
HTML基础--CSS样式表（二）
1.元素显示类型元素类型的分类,依据CSS的显示块元素(block element) 行内(内联元素) 行内块元素块元素 A)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域 ...
Qt样式表参考：Qt Style Sheets
Qt样式表支持各种属性.伪状态和子控件,使得定制小部件的外观成为可能. 可设置样式的小部件列表下表列出了可以使用样式表自定义的Qt小部件: Widget 如何设计风格 QAbstractScroll ...
样式表（CSS：Cascading Style Sheets）简要教程[上]
首先提供两个手册的下载 CSS2&JavaScript.rar 一．样式表基础 1．样式表中每一个条目由选择符(selector)和对应的规则组成,选择符通常是HTML元素名称,也可以是类( ...
css规则由两部分构成,CSS-层叠样式表基础教程
CSS-层叠样式表基础教程层叠样式表(Cascading Style Sheets,简写CSS),网页可以使用CSS来决定文件的颜色.字体.排版等显示特性.CSS最主要的目的是将文件的结构和内容(用 ...
Web开发（一）·期末不挂之第四章·CSS语法基础(CSS选择器选择器优先级各类样式表的使用方法)
CSS语法基础一.单纯html控制样式的缺点二. CSS✪✪✪ CSS概述 CSS基础语法组成选择器标签选择器类选择器 id选择器通配选择器后代选择器插入样式表的三种方式行内样式 ...
CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
前言:本篇文章为 CSS 基础系列笔记第一篇,参考黑马程序员pink老师前端入门教程如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...
WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式能力目标 Ø 理解CSS的 ...
css实例 css中id/class 详解样式表（外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解）[第一天]
文章目录 css实例 css中的id css中的class 样式表外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解 css实例 CSS 规则由两个主要的部分构成:选择器,以 ...

HTML基础_CSS样式表上第九天

HTML基础_CSS样式表上第九天相关推荐

最新文章

热门文章

HTML基础___CSS样式表__上 第九天

HTML基础___CSS样式表__上 第九天相关推荐

最新文章

热门文章

HTML基础_CSS样式表上第九天

HTML基础_CSS样式表上第九天相关推荐