手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

环球关注：快速带你入门css

2023-03-18 23:10:05 来源：博客园

css复习笔记

1. css样式值

1.1 文字样式

1   p{2          font-size: 30px;/*设置文字大小*/3          font-weight: bold;/*文字加粗*/4          font-style: italic;/*文字倾斜*/5          font-family: 幼圆;/*文字字体*/6       }

1.2 文本样式

color 设置颜色,取值可以是单词也可以是十六进制的颜色值

text-align 水平对齐,取值:left/center/right,前提条件:横向位置有多余的空间才可以

vertical-align 垂直对齐，取值:top/middle/bottom

(资料图片)

text-decoration:underline,line-through,overline,none 文本修饰,设置下划线，删除线，取消下划线等

line-height 行高，单位px

text-indent 首行缩进，单位:em（字符）或px

1  p{ 2          font-size: 30px;/*设置文字大小*/ 3          font-weight: bold;/*文字加粗*/ 4          font-style: italic;/*文字倾斜*/ 5          font-family: 幼圆;/*文字字体*/ 6          color: #f00;/*十六进制值以#开头+6位数值,当相邻的两个数值相同时，可以省略其中一个 */ 7          text-align: center;/*设置文本的水平对齐方式,前提:有额外的移动空间*/ 8          text-decoration: underline;/*设置或取消下划线,取值:underline,line-through,overline,none*/ 9          line-height:60px;/*行高，设置完成后，文字默认垂直居中*/10          text-indent: 2em;/*首行缩进，单位：px，em(字符)*/11       }12       img{ vertical-align: top;/*垂直对齐方式:top,middle,bottom*/13       }

1.3 列表项符号

1     li{2           list-style-type: none;/*取消列表项符号*/3           list-style-image: url("taobaolog.png");/*将列表项符号设置成图片*/4       }

1.4 鼠标样式

1  cursor:pointer/*pointer 小手样式，help 帮助的样式 wait 等待的样式*/ 2   span:hover{color: red; text-decoration: underline;cursor: pointer}

1.5 伪类

针对于鼠标的不同时间点，进行的css设置

分类:

:link  未点击之前:hover 鼠标放上的时候:active 鼠标点击时:visited 鼠标访问后

语法：

选择器:伪类名{ css}案例:

1   li:hover{css} 当鼠标放在li上面时。。。2  3   li:hover{color: red;text-decoration: underline}4  5  a:link{color: black;text-decoration: none}6  a:hover{color: red; text-decoration: underline}7  a:active{ color: green}8  a:visited{color: gray}

1.6 DIV及背景属性

div 层标签，用来替代table,实现页面布局

div+css实现页面开发

1  div{2              width: 200px;3              height: 200px;4              5              background-image: url("taobaolog.png");/*背景图片*/6              background-repeat:no-repeat ;/*背景重复:repeat,no-repeat,repeat-x,repeat-y*/7              background-position:50px 100px;/*位置的值先水平后垂直*/8          }

2. 综合练习案例

复习：

html的基本结构

html的基本标签(标题,段落,换行，水平线，倾斜，加粗，超链接，图片，列表，表格，表单，css(位置，选择器，样式))

3.相关练习

练习1：

1 2 3 4 5 Title 6 35 36 37 京东
38 淘宝
39 拼夕夕40

列表内容
列表内容
列表内容
列表内容
列表内容

47 这是span标签48

这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容49 这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容50 这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容51 这是p标签的内容这是p标签的内容这是p标签的内容

52 百度53

54 我是文字内容55

56 57 58 61 62

59 aaaa60

63 64

颜色以及水平居中

显示结果：

练习2：

1  2  3  4      5     Title 6     41 42 43 44   家用电器
45    46        大家电47    
48   49     50       平板电视  洗衣机  冰箱
51       空调  烟机/灶具  热水器
52       冷柜/酒柜  消毒柜  家庭影院
53     
54   
55      生活电器
56     57         58             平板电视  洗衣机  冰箱
59             空调  烟机/灶具  热水器
60             冷柜/酒柜  消毒柜  家庭影院
61         
62     
63        厨房电器
64     65         66             平板电视  洗衣机  冰箱
67             空调  烟机/灶具  热水器
68             冷柜/酒柜  消毒柜  家庭影院
69         
70     
71          五金家装
72     73         74             平板电视  洗衣机  冰箱
75             空调  烟机/灶具  热水器
76             冷柜/酒柜  消毒柜  家庭影院
77         
78     
79 
80 81

View Code

显示结果：

练习3：

1  2  3  4      5     Title 6     53 54 55 56     大家都喜欢买的美容品
57     58         1 雅诗兰黛即时修护眼部精华霜15ml
59         2 伊丽莎白雅顿显效复合活肤霜 75ml
60         3 OLAY玉兰油多效修护霜 50g
61         4 巨型一号丝瓜水320ML
62         5 倩碧保湿洁肤水2号 200ml
63         6 比度克细肤淡印霜 30g
64         7 兰芝 (LANEIGE)夜间修护锁水面膜 80ml
65         8 SK-II护肤精华露 215ml
66         9 欧莱雅青春密码活颜精华肌底液
67     
68 
69 70 71 72

View Code

显示结果：

关键词：