快速带你入门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 ...
随机推荐
- 【SpringBoot】AOP默认的动态代理
分析: 当引入AOP相关依赖后 <dependency> <groupId>org.springframework</groupId> <artifactId ...
- C/C++ 反汇编：流程控制与循环结构
反汇编即把目标二进制机器码转为汇编代码的过程,该技术常用于软件破解.外挂技术.病毒分析.逆向工程.软件汉化等领域,学习和理解反汇编对软件调试.系统漏洞挖掘.内核原理及理解高级语言代码都有相当大的帮助, ...
- PE格式：新建节并插入DLL
首先老样子,我们先来到PE节表位置处,并仿写一个.hack的节,该节大小为0x1000字节,在仿写前我们需要先来计算出.hack的虚拟偏移与实际偏移,先来查询一下当前节表结构,如下: 接着我们通过公式 ...
- SpringCloud-04-http客户端Feign
http客户端Feign 1.Feign的介绍 Feign是一个声明式的http客户端,官方地址:https://github.com/OpenFeign/feign 其作用就是帮助我们优雅的实现ht ...
- 月薪40K+的测试老兵，测试开发学习实战心得分享
1. 前言 大家好,我是Arthur,拥有超过10年以上的银行测试经验,目前在一家互联网创业公司担任测试经理.在我们那个年代,基本上都是不会写代码的做测试工作,而且基本都是纯手工:最近几年,测试开发开 ...
- 轻薄本杀入3000元档！真我笔记本Air评测：轻松实现12小时超长续航
一.前言:真我笔记本Air带轻薄本杀入3K档位 拓宽产品线是如今各大数码品牌的核心策略之一,尤其是跨界,比如手机厂商,就不断在平板.智能穿戴.PC笔记本等领域延伸,甚至是新能源汽车. 现在,realm ...
- 【算法】【C语言进阶】C语言字符串操作宝藏级别汇总 strtok函数 strstr函数该怎么用？【超详细的使用解释和模拟实现】
[算法][C语言进阶]C语言字符串操作宝藏级别汇总[超详细的使用解释和模拟实现] 作者: @小小Programmer 这是我的主页:@小小Programmer 在食用这篇博客之前,博主在这里介绍一下其 ...
- NEMU PA 3-3 实验报告
一.实验目的 在上一章PA3-2中,我们实现了分段机制,将48位的虚拟地址vaddr转换成了laddr.为什么不是paddr呢?这就要说到这一章要完成的东西:**分页机制 **. 从80386开始,计 ...
- Zabbix 配置笔记
Zabbix Server 安装参考 https://www.cnblogs.com/clsn/p/7885990.html 安装脚本 #!/bin/bash #clsn #设置解析 注意:网络条件较 ...
- Java开发技巧杂记
杂记一 创建项目的spring initializr,要求是创建spring boot3.0,且不在支持java8语言,且要求语言大于17,所以创建项目时,无法创建srping2.0项目了:如果要创建 ...