快速带你入门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 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css">
7 p{
8 font-size: 30px;/*设置文字大小*/
9 font-weight: bold;/*文字加粗*/
10 font-style: italic;/*文字倾斜*/
11 font-family: 幼圆;/*文字字体*/
12 color: #f00;/*十六进制值以#开头+6位数值,当相邻的两个数值相同时，可以省略其中一个 */
13 text-align: center;/*设置文本的水平对齐方式,前提:有额外的移动空间*/
14 text-decoration: underline;/*设置或取消下划线,取值:underline,line-through,overline,none*/
15 line-height:60px;/*行高，设置完成后，文字默认垂直居中*/
16 text-indent: 2em;/*首行缩进，单位：px，em(字符)*/
17 }
18 img{ vertical-align: top;/*垂直对齐方式:top,middle,bottom*/
19 }
20 td{ vertical-align:top;}
21 li{
22 list-style-type: none;/*取消列表项符号*/
23 list-style-image: url("taobaolog.png");/*将列表项符号设置成图片*/
24 }
25 span{text-align: center;
26 }
27 /* tr{text-align: center}*/
28 li:hover{color: red;text-decoration: underline}
29 a:link{color: black;text-decoration: none}
30 a:hover{color: red; text-decoration: underline}
31 a:active{ color: green}
32 a:visited{color: gray}
33 span:hover{color: red; text-decoration: underline;cursor: pointer}
34 </style>
35 </head>
36 <body>
37 <a href="https://www.jd.com">京东</a><br>
38 <a href="https://www.taobao.com">淘宝</a><br>
39 <span>拼夕夕</span>
40 <ul>
41 <li>列表内容</li>
42 <li>列表内容</li>
43 <li>列表内容</li>
44 <li>列表内容</li>
45 <li>列表内容</li>
46 </ul>
47 <span>这是span标签</span>
48 <p>这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容
49 这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容
50 这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容
51 这是p标签的内容这是p标签的内容这是p标签的内容</p>
52 <a href="https://www.baidu.com">百度</a>
53 <p>
54 我是文字内容<img src="a3.jpg">
55 </p>
56 <table border="1" cellspacing="0" height="300px">
57 <tr>
58 <td>
59 aaaa
60 </td>
61 </tr>
62 </table>
63 </body>
64 </html>
颜色以及水平居中
显示结果：
练习2：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css">
7 .title{ /*设置一级目录*/
8 font-size: 18px;
9 font-weight: bold;
10 line-height: 35px;
11 background-color: #0f7cbf;
12 text-indent: 1em;
13 color: white;
14 }
15 .content{ /*设置二级目录*/
16 font-size: 14px;
17 font-weight: bold;
18 line-height: 30px;
19 background-color: #e4f1fa;
20 color: #0f7cbf;
21 text-indent: 2em;
22 }
23 ul{
24 font-size: 12px;
25 line-height: 20px;
26 color: #666;
27 list-style-type: none;
28 padding-left: 20px;
29 }
30 .content a:link{
31 text-decoration: none;
32 color: #0f7cbf;
33 }
34 .content a:hover{ text-decoration: underline}
35
36 li a:link{text-decoration: none; color: #666}
37 li a:hover{color: #f60; text-decoration: underline}
38 .all{ width: 230px}
39
40 </style>
41 </head>
42 <body>
43 <div class="all">
44 <div class="title">家用电器</div>
45 <div class="content">
46 <a href="#">大家电</a>
47 </div>
48 <div>
49 <ul>
50 <li><a href="#">平板电视</a> 洗衣机 冰箱</li>
51 <li>空调 烟机/灶具 热水器</li>
52 <li>冷柜/酒柜 消毒柜 家庭影院</li>
53 </ul>
54 </div>
55 <div class="content">生活电器</div>
56 <div>
57 <ul>
58 <li>平板电视 洗衣机 冰箱</li>
59 <li>空调 烟机/灶具 热水器</li>
60 <li>冷柜/酒柜 消毒柜 家庭影院</li>
61 </ul>
62 </div>
63 <div class="content">厨房电器</div>
64 <div>
65 <ul>
66 <li>平板电视 洗衣机 冰箱</li>
67 <li>空调 烟机/灶具 热水器</li>
68 <li>冷柜/酒柜 消毒柜 家庭影院</li>
69 </ul>
70 </div>
71 <div class="content">五金家装</div>
72 <div>
73 <ul>
74 <li>平板电视 洗衣机 冰箱</li>
75 <li>空调 烟机/灶具 热水器</li>
76 <li>冷柜/酒柜 消毒柜 家庭影院</li>
77 </ul>
78 </div>
79 </div>
80 </body>
81 </html>
显示结果：
练习3：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css">
7 a {
8 text-decoration: none;
9 color: #666666;
10 font-size: 15px
11 }
12
13 a:hover {
14 text-decoration: none;
15 color: red
16 }
17
18 li {
19 background-image: url("dot_01.gif");
20 background-repeat: no-repeat;
21 background-position: 20px 2px;
22 /* border-bottom:red 1px solid;*/
23 }
24
25 li:hover {
26 background-image: url("dot_02.gif");
27 background-repeat: no-repeat;
28 background-position: 20px 2px
29 }
30
31 span {
32 color: white
33 }
34
35 ul {
36 list-style-type: none;
37 text-indent: 30px;
38 }
39
40 #beauty {
41 background-color: white;
42 width: 400px
43 }
44
45 p {
46 background-color: green
47 }
48
49 body {
50 background-color: #e4f1fa
51 }
52 </style>
53 </head>
54 <body>
55 <div id="beauty">
56 <p>大家都喜欢买的美容品</p>
57 <ul>
58 <li><a href="#"><span>1</span> 雅诗兰黛即时修护眼部精华霜15ml</a></li>
59 <li><a href="#"><span>2</span> 伊丽莎白雅顿显效复合活肤霜 75ml</a></li>
60 <li><a href="#"><span>3</span> OLAY玉兰油多效修护霜 50g</a></li>
61 <li><a href="#"><span>4</span> 巨型一号丝瓜水320ML</a></li>
62 <li><a href="#"><span>5</span> 倩碧保湿洁肤水2号 200ml</a></li>
63 <li><a href="#"><span>6</span> 比度克细肤淡印霜 30g</a></li>
64 <li><a href="#"><span>7</span> 兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a></li>
65 <li><a href="#"><span>8</span> SK-II护肤精华露 215ml</a></li>
66 <li><a href="#"><span>9</span> 欧莱雅青春密码活颜精华肌底液</a></li>
67 </ul>
68 </div>
69
70
71 </body>
72 </html>
显示结果：
快速带你入门css的更多相关文章
- 带你入门 CSS Grid 布局
前言 三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦.没错:我们现在就可以在最流行的两大浏览器上玩转 ...
- webpack快速入门——CSS进阶：自动处理CSS3前缀
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...
- webpack快速入门——CSS文件打包
1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...
- webpack快速入门——CSS中的图片处理
1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...
- webpack快速入门——CSS分离与图片路径处理
1.在终端安装extract-text-webpack-plugin 2.引入插件 const extractTextPlugin = require("extract-text-webpa ...
- webpack快速入门——CSS进阶，Less文件的打包和分离
1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loa ...
- webpack快速入门——CSS进阶：SASS文件的打包和分离
1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...
- webpack快速入门——CSS进阶：消除未使用的CSS
使用PurifyCSS可以大大减少CSS冗余 1.安装 cnpm i purifycss-webpack purify-css --save-dev 2.引入glob,因为我们需要同步检查html模板 ...
- C#单元测试，带你入门
注:本文示例环境 VS2017 XUnit 2.2.0 单元测试框架 xunit.runner.visualstudio 2.2.0 测试运行工具 Moq 4.7.10 模拟框架 为什么要编写单元测试 ...
- OsharpNS轻量级.net core快速开发框架简明入门教程-Osharp.Permissions使用
OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...
随机推荐
- Django笔记四十二之model使用validator验证器
本文首发于公众号:Hunter后端 原文链接:Django笔记四十二之model使用validator验证器 这一篇笔记介绍一下 model 里的 validator 验证器. 首先,这是个什么东西呢 ...
- vim 从嫌弃到依赖(19)——替换
之前讨论了关于在vim中使用正则表达式的相关知识能方便的进行搜索,现在在之前的基础之上继续来讨论如何进行替换操作. substitute 简介 substitute 允许我们先查找一段文本并用新的文本 ...
- 手撕Vue-实现将数据代理到Vue实例
前言 经过上一篇文章的学习,完成了 v-on 指令的实现,接下来我们来实现将数据代理到 Vue 实例上. 为什么要完成这个功能呢?因为我们在使用 Vue 的时候,可以直接通过 this.xxx 的方式 ...
- Python 使用Scapy构造特殊数据包
Scapy是一款Python库,可用于构建.发送.接收和解析网络数据包.除了实现端口扫描外,它还可以用于实现各种网络安全工具,例如SynFlood攻击,Sockstress攻击,DNS查询攻击,ARP ...
- Linux进程间通信 [补档-2023-07-27]
Linux进程间通信 10-1 简介 在Linux下,进程之间相互独立,每个进程都有自己不同的用户地址空间.任何一个进程的全局变量在另 一个进程中都看不到,所以进程和进程之间不能相互访问.如果非要 ...
- 使用XAG配置GoldenGate在RAC集群环境中的高可用
背景:本文是根据实际客户测试需求整理,因为客户OGG所在环境只有GI集群,数据库部署在其他位置,所以会有一些差异,但核心思路一致,已完全测试通过,整理出来供大家参考. 1.前期准备 2.创建ACFS文 ...
- python高级用法之命名元组namedtuple
1．tuple类型数据的获取 大家都知道,元组里面的数据获取只能通过下标的方式去获取,比如 :a = ('username', 'age', 'phone'),要获取username的话 ,就需要用a ...
- 使用OBS Studio软件进行桌面录屏
操作系统 :Windows10_x64 OBS Studio是开源免费的录屏和直播软件,支持Windows.macOS及Linux操作系统. 这里记录下桌面录屏和桌面区域录屏的使用,也方便我后续查阅( ...
- NC24727 [USACO 2010 Feb G]Slowing down
题目链接 题目 题目描述 Every day each of Farmer John's N (1 <= N <= 100,000) cows conveniently numbered ...
- PCIE分层结构
PCIe分层结构 绝大多数的总线或者接口,都是采用分层实现的.PCIe也不例外,它的层次结构如下: PCIe定义了下三层(彩色部分):事务层(Transaction Layer),数据链路层(Data ...