快速带你入门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 ...
随机推荐
- 从零开始配置 vim(14)——目录管理插件
我们在介绍vim目录管理的时候提到 vim自带一个 叫做 netrw的工具来管理目录.但是它自身的功能有限,而且样式也丑.今天我们将使用其他强大的插件来替代 netrw,增强目录管理功能 nvim-t ...
- Go语言的100个错误使用场景（一）｜代码和项目组织
目录 前言 1. Go: Simple to learn but hard to master 1.1 Go 语言概述 1.2 简单不等于容易 1.3 使用 Go 的100个错误 2. Code an ...
- 数据挖掘机器学习[七]---2021研究生数学建模B题空气质量预报二次建模求解过程：基于Stacking机器学习混合模型的空气质量预测｛含码源+pdf文章｝
相关文章: 特征工程详解及实战项目[参考] 数据挖掘---汽车车交易价格预测[一](测评指标:EDA) 数据挖掘机器学习---汽车交易价格预测详细版本[二]{EDA-数据探索性分析} 数据挖掘机器学习 ...
- 4.6 Windows驱动开发：内核遍历进程VAD结构体
在上一篇文章<内核中实现Dump进程转储>中我们实现了ARK工具的转存功能,本篇文章继续以内存为出发点介绍VAD结构,该结构的全程是Virtual Address Descriptor即虚 ...
- LyScriptTools 扩展Script类API手册
纯脚本类的功能实现都是调用的x64dbg命令,目前由于run_command_exec()命令无法返回参数,故通过中转eax寄存器实现了取值,目前只能取出整数类型的参数. 插件地址:https://g ...
- 关于TypeScript中提示xxx is declared but its value is never read的解决方法
首先,提示很明显,是定义了变量,但是却没有使用.解决方案有如下两种: 一: 需要确定变量是否真的没有使用到,如果没有使用直接删除即可. 二: 对于方法中的入参,是没法随便删除的.这时候我们可以利用Ty ...
- MySQL数据库详解（上）
MySQL(一) 1.登陆 mysql -uroot -pMyPassword 使用默认的root用户名登陆,将MyPassword改成自己的密码 2.基本操作 --注释 updata mysql . ...
- ArrayList中的遍历删除
ArrayList 中的遍历删除 在代码编写过程中经常会遇到这样的要求:遍历一个线性表,要求只遍历一遍(时间复杂度\(O(n)\)),删除符合指定条件的元素,且要求空间复杂度 \(O(1)\). 例如 ...
- C# 二十年语法变迁之 C# 2,C# 3 ,C# 4参考
C# 二十年语法变迁之 C# 2,C# 3 ,C# 4参考 https://benbowen.blog/post/two_decades_of_csharp_i/ 自从 C# 于 2000 年推出以来 ...
- Android上的日志
Android的日志机制和普通的Java项目有一些不一样, 这里记录一下 安卓内建的Log 安卓应用类型(在build.gradle里定义 android {...})的模块, 可以直接引用内建的an ...