电子课件单元5 CSS3基本样式设计

1、 内容可修改电子课件单元5 CSS3基本样式设计 字体样式和文本样式文字是网页最基本的组成元素，在网页标签中，可以通过标题标签和段落标签来插入文字，这些标签有默认的显示样式。在实际应用中，可以通过CSS样式来修改这些文字的显示效果。引入font-stylefont-variantfont-weightfont-sizefont-family字体样式属性属性值描述normal文本正常显示italic文本斜体显示oblique文本倾斜显示font-style属性用于规定斜体文本字体样式pfont-style: italic;学而不思则罔，思而不学则殆字体样式属性font-variant属性用于将元

2、素中所有的小写字母都转换为大写 该属性仅作用于英文字符，不经常使用。字体样式属性属性值描述normal默认值，标准字体small-caps小型大写字母的字体inherit从父元素继承属性 font-variant属性值值描述normal默认值，定义标准的字符bold定义粗体字符bolder定义更粗的字符lighter定义更细的字符100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900定义由细到粗的字符，400等同于normal，而700 等同于bold font-weight属性值font-weight属性用于设置文本粗细 示例： pfont-w

3、eight: bold;字体样式属性下面代码设置网页中文字字号为12像素 body font-size:12px;font-size 属性用于设置文本的大小font-size 属性值可以是绝对或相对值，比较常用的是使用数值来设置字体大小。px像素是相对于显示器屏幕分辨率而言的，任意浏览器的默认字体高都是16px。em是相对于当前对象内文本的字体尺寸。如当前对象内文本的字体尺寸被设置为14px则1em=14px；如当前对象内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸1em=16px。rem是指相对于根元素的字体大小的单位。如果html根元素设置字体尺寸为10px，则1em=10px。字

4、体样式属性font-family 属性用于定义文本的字体系列该属性的取值可以有多个字体名称，按优先顺序排列并以逗号隔开。优先使用方正楷体，假设用户电脑上没有方正楷体，但是有微软雅黑的字体，则浏览器中会以微软雅黑的字体显示p元素的文字。字体样式属性示例pfont-family: 方正楷体,微软雅黑;font属性（简写属性） 语法： font: font-style font-variant font-weight font-size/line-height font-family; 字体 h1font: italic normal 20px/30px 楷体; 勤学好问 字体样式属性文字的颜色以及

5、文本格式的样式效果colortext-aligntext-decorationtext-indentline-height文本样式属性color属性用于设置文字的颜色常用颜色值CSS颜色规范预定义的颜色名称，例如red，blue，green等。十六进制颜色代码：#RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色），所有值必须介于0和FF之间。RGB颜色代码：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0到100）之间的整数。文本样式属性值描述left默认值，文本左对齐right文本右对齐center文本居中对齐justify文

6、本两端对齐text-align属性值text-align属性用来设置文本的水平对齐方式下面的样式规则设置文本水平居中： .first text-align:center; 文本样式属性值描述none默认值，定义标准的文本underline定义文本下的一条线line-through定义穿过文本下的一条线text-decoration属性值text-decoration属性用来设置或删除文本的装饰线如果希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：a text-decoration: none;如果希望添加删除线效果，可以使用以下 CSS 来实现： spantext-decorati

7、on: line-through;文本样式属性text-indent属性用来控制文段首行缩进的距离下面样式规则实现：段落首行缩进两个字符 p text-indent:2em ;注意：缩进，经常使用相对单位em，2em可以使得首字符缩进两个字符的位置。文本样式属性line-height 属性用来设置行间距（行高）设置段落行间距为1.5倍，可以用如下代码： .first line-height:1.5em; 文本样式属性边框样式边框样式border-style属性定义线型border-width属性定义粗细border-color属性定义颜色边框样式常用的样式有border-style属性dott

8、ed（点线）solid（实线）dashed（虚线）border-style属性是边框必须设置的一个属性border-style: dotted solid double dashed；border-style: dotted solid double；border-style: dotted solid；border-style: dotted；上 右 下 左上 右和左 下上和下 右和左border-style属性border-style属性取值可以有一到四个值描述thin定义细的边框medium默认值，定义中等的边框thick定义粗的边框length允许自定义边框的宽度border-widt

9、h属性注意：border-width属性常用像素值来定义边框的宽度注意：border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。如果元素没有任何文本，边框颜色就是其父元素的文本颜色。border-color: red;border-color: #00ff00;border-color: rgb(0,0,255);border-color属性border-top-style 上边框的样式border-top-width上边框的宽度border-top-color上边框的

10、颜色border-bottom-style border-bottom-widthborder-bottom-colorborder-right-style border-right-widthborder-right-colorborder-left-style border-left-widthborder-left-color单边框属性示例： h1border-bottom-style: solid;border-bottom-color: #000;border-bottom-width: 1px; border属性是border-style、border-width和border-c

11、olor属性的简写单边框属性简写border-left、border-right、border-top、border-bottomh1border-bottom-style: solid;border-bottom-color: #000;border-bottom-width: 1px;h1border-bottom: 1px solid #000;border属性示例： border: 1px solid #000;示例： 圆角属性：border-radiusborder-radius属性 .boxwidth: 100px;height: 100px;border: 1px solid #

12、000; border-radius: 20px;border-radius: 50%;border-radius属性值：具体的像素值或者百分比border-radius属性示例： 四个值：左上角 右上角 右下角 左下角（顺时针方向）三个值：左上角 右上角和左下角 右下角 两个值：左上角和右下角 右上角和左下角一个值：四个圆角值 .boxwidth: 200px;height: 100px;background-color: #6fb525;float: left;margin-right: 20px;.box1 border-radius: 15px 50px 30px 5px;.box2

13、border-radius: 15px 50px 30px;.box3 border-radius: 15px 50px;.box4 border-radius: 15px;border-radius属性border-radius属性取值实践任务 设置公司简介页面样式设置整个“公司简介”模块宽度为920px，字号为14px；设置“公司简介”标题字号为16px，行高为50px，底部边框为1px实线，颜色为#DDD；所有段落设置首行缩进2字符，行高为2em，两端对齐；两处强调文本效果如图所示；设置图片宽度为220px，高度为130px，边框为3px双实线，边框颜色为#0072C6；设置图文混排效果

14、，两张图都向右边浮动；设置图片与左边文本距离为40px（margin-left:40px;）。任务描述背景样式背景样式background-color设置背景颜色background-image设置背景图像background-repeat设置背景平铺background-attachment设置背景图像是否固定background-position设置背景图像位置background背景属性的缩写背景属性下面样式规则实现：改变整个页面的背景色 body background-color: red; 下面样式规则实现：改变h1标题的背景色 h1 background-color: blue;

15、background-color属性body background-image: url(bg.gif); 注意：url括号里写的是图片的相对路径background-image属性background-repeat属性值：repeat-x 图像横向平铺repeat-y 图像纵向平铺repeat 图像横向和纵向都平铺no-repeat 图像不平铺body background-image: url(bg.gif);background-repeat: no-repeat; background-repeat属性background-attachment属性用于指定背景图像是固定在屏幕上的，还是

16、随着它所在的元素而滚动的。属性值： scroll 是默认值，表示图像会跟随页面滚动 fixed 表示图像是固定在屏幕上的body background-image: url(bg.gif);background-repeat: no-repeat; background-attachment: fixed; background-attachment属性background-position属性值：可以是以百分比或固定单位（比如像素、厘米等）；也可以是“top”、“bottom”、“center”、“left”和“right”这些值。background-position: 100px 200

17、px； 表示背景图像将被放置在位于距浏览器窗口左边100像素、顶部200像素处。background-position: 50% 25%； 表示图像被放置在页面内水平居中、离顶部四分之一处。background-position: top right；表示图像被放置在页面的右上角。background-position属性body background-image: url(bg.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; backgro

18、und-position属性background-position属性值：可以是以百分比或固定单位（比如像素、厘米等）；也可以是“top”、“bottom”、“center”、“left”和“right”这些值。background-color: #FFCC66;background-image: url(bg.gif);background-repeat: no-repeat;background-attachment: fixed;background-position: right bottom;background: #FFCC66 url(bg.gif) no-repeat fixe

19、d right bottom;属性值顺序： background-color | background-image | background-repeat |background-attachment | background-position如果省略某个属性不写出来，那么将自动为它取默认值。background属性background属性是所有与背景有关的属性的缩写用法。渐变背景线性渐变径向渐变渐变渐变的背景效果通常使用background-image属性来设置。background-image:linear-gradient(direction,color-stop1,color-stop

20、2,.);.box1 width: 200px;height: 200px;background-image: linear-gradient(red, yellow);direction属性值可以设置为：to right（从左到右），to bottom right(从左上角到右下角)等。.box1 width: 200px;height: 200px;background-image: linear-gradient(to bottom right , red, yellow);线性渐变线性渐变语法background-image: radial-gradient(shape size at

21、 position, start-color, ., last-color);.box1 width: 200px;height: 200px;background-image:radial-gradient(red,yellow,green);径向渐变径向渐变语法列表和超链接样式列表标志类型图形符号列表位置列表样式列表类型属性值显示效果无序列表（ul）默认值，disccirclesquare有序列表（ol）默认值，decimal阿拉伯数字1、2、3upper-alpha大写英文字母A、B、Clower-alpha小写英文字母a、b、cupper-roman大写罗马数字I、II、IIIlowe

22、r-roman小写罗马数字i、ii、iii、公共属性none不显示任何符号常用属性值修改列表项的标志类型ul list-style-type : square红茶绿茶花茶list-style-type属性列表项标志设置为图像ul list-style-image: url(img/icon.gif);红茶绿茶花茶注意：列表项标志的图片背景色最好设置为透明色，所以图片格式最好为gif或者png格式list-style-image 属性值描述inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。outside默认值。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。inherit规定

23、应该从父元素继承 list-style-position 属性的值。确定列表标志出现在列表项内容之外还是内容内部list-style-position 属性属性值的顺序为：list-style-type、list-style-position、list-style-image。ul list-style-type: none;/* 设置列表项无项目符号*/ul li background-image: url(img/icon.gif);/* 设置列表项背景图片*/background-repeat: no-repeat;/* 设置背景图片不重复*/background-position: l

24、eft center;/* 设置背景图片位置靠左垂直方向居中*/padding-left: 20px;/* 设置列表项文本到左边的距离为16px*/红茶绿茶花茶list-style属性（简写属性）首页产品展示公司简介会员注册联系我们lifloat: left;列表方向超链接的特殊性在于能够根据它们所处的状态来设置它们的样式。超链接的四种状态：a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻伪类选择器超链接样式超链接的四种状态设置次序规则：a:hover 必须位于 a:link

25、和 a:visited 之后 a:active 必须位于 a:hover 之后 在实际开发中，经常将超链接的样式简化为设置a和a:hover这两种状态的样式超链接样式原始页面效果navheight: 30px;background-color: #0072C6;nav ullist-style: none;nav ul lifloat: left;首页产品展示公司简介会员注册联系我们超链接样式案例：横向导航栏navheight: 30px;background-color: #0072C6;nav ullist-style: none;nav ul lifloat: left; 设置链接颜色设

26、置超链接下划线效果nav ul li acolor: #fff;nav ul li a:hovercolor: red;nav ul li acolor: #fff;text-decoration: none;nav ul li a:hovercolor: red;text-decoration: underline;超链接样式案例：横向导航栏navheight: 30px;background-color: #0072C6;nav ullist-style: none;nav ul lifloat: left;nav ul li acolor: #fff;text-decoration: n

27、one;nav ul li a:hovercolor: red;text-decoration: underline;background: orange;navheight: 30px;background-color: #0072C6;nav ullist-style: none;nav ul lifloat: left;nav ul li acolor: #fff;text-decoration: none;display: block; width: 100px;text-align: center;line-height: 30px;nav ul li a:hovercolor: r

28、ed;text-decoration: underline;background: orange;超链接样式设置链接背景颜色案例：横向导航栏实践任务 设置新闻中心版块样式设置该模块宽度为400px；设置“新闻中心”标题字号为20px，行高为50px；列表项标志使用icon1.jpg图片，列表项行高为50px，除最后一项其它列表项设置底部边框为1px虚线，颜色为#D1D1D1；日期向右边浮动；列表超链接文本颜色为#666666，鼠标指向列表链接文本颜色变为#FFA500。任务描述表格样式和表单样式表格样式使用CSS样式中的border属性来设置表格边框样式table,th,td border:

29、1px solid #000;表格边框border-collapse属性值有collapse（合并）和separate（分离），默认的属性值为separate。tableborder-collapse: collapse;table,th,td border: 1px solid #000;border-collapse属性通过 width 和 height 属性定义表格的宽度和高度。tableborder-collapse: collapse;table,th,td border: 1px solid #000;tablewidth: 400px;height: 200px;表格宽度和高度对

30、齐方式属性属性值水平对齐方式text-alignleft（向左）、right（向右）和center（居中）垂直对齐方式vertical-aligntop（顶部）、bottom（底部）和middle（中部）tableborder-collapse: collapse;table,th,td border: 1px solid #000;tablewidth: 400px;height: 200px;tdtext-align: center;vertical-align: bottom;表格文本对齐文字颜色使用color属性表格边框颜色使用border属性背景色使用background(或background-color)属性tableborder-collapse: collapse;table,th,td border: 1px solid