最新要闻

广告

手机

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

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

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

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

家电

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

来源:博客园

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
    41
  • 列表内容
  • 42
  • 列表内容
  • 43
  • 列表内容
  • 44
  • 列表内容
  • 45
  • 列表内容
  • 46
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 69 70 71 72 
View Code

显示结果:

关键词: