快速带你入门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 ...
随机推荐
- 微信小程序-组件生命周期方法
官方文档:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html 正如官方显示组件的生命周期中常用的 ...
- Win32汇编：算数运算指令总结
整理复习汇编语言的知识点,以前在学习<Intel汇编语言程序设计 - 第五版>时没有很认真的整理笔记,主要因为当时是以学习理解为目的没有整理的很详细,这次是我第三次阅读此书,每一次阅读都会 ...
- centos7多网口配置同网段IP解决方案
环境 CentOS Linux release 7.9.2009 (Core) 需求 服务器eth0和eth1配置同网段IP地址.掩码不配网关,同时连接两根网线,对端是两台物理隔离的交换机. 现象 给 ...
- 利用 ASP.NET Core 开发单机应用
前言 现在是分布式微服务开发的时代,除了小工具和游戏之类刚需本地运行的程序已经很少见到纯单机应用.现在流行的Web应用由于物理隔离天然形成了分布式架构,核心业务由服务器运行,边缘业务由客户端运行.对于 ...
- 如何使用 etcd 实现分布式 /etc 目录
etcd 是一款兼具一致性和高可用性的键值数据库,简单.安全.快速.可信,目前是 Kubernetes 的首要数据存储.我们先来看一段 etcd 官方对于名字的解释. The name "e ...
- Web-background information
Client and Server A connection on the Internet takes place between 2 computers only: one that has th ...
- strobe
总是喜欢一个人出神,置身的场景经常是小时有趣的明晃晃的下午.也不知道为什么印象中有趣的下午的阳光总是让人睁不开眼,我也曾试图给大脑传递过"能不能将那晃眼的阳光删去",但再次置身仍是 ...
- Mysql 8.0 Navicat连接Mysql报错Authentication plugin ‘caching_sha2_password‘ cannot be loaded
1.终端登陆MySQL$ mysql -u root -ppassword #登入mysql 2.修改账户密码加密规则并更新用户密码ALTER USER 'root'@'localhost' IDEN ...
- SP34020 ADAPET - Ada and Pet 题解
题目传送门 前置知识 前缀函数与 KMP 算法 解法 经检验 样例,我们发现 \(|S|k\) 并不是最优答案. 考虑利用 luogu P4391 [BOI2009] Radio Transmissi ...
- Spring事务使用注意事项
Spring提供的事务使用起来很方便,一个@Transactional注解就搞定全部,但是如果不注意,也会踩坑 提到事务就应该想到至少以下几点: 1.在事务方法中加锁,可能会导致锁失效 无论是Java ...