第49天学习打卡（CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型）
推荐书籍：码出高效: Java 开发手册
2.2 层次选择器
idea里代码规范是按：ctrl +alt+L快捷键
注释快捷键：ctrl+/
1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你
<style>
/*p{*/
/* background: #02ff00;*/
/*}*/
/* 后代选择器 */
body p{
background: red;
}
</style>
2.子选择器: 只有一代 ，儿子
/* 子选择器*/
body>p{
background: #3cbda6;
}
3.相邻兄弟选择器：同辈（对下相邻）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p{*/
/* background: #02ff00;*/
/*}*/
/* 后代选择器 */
/* body p{*/
/* background: red;*/
/* }*/
/* 子选择器*/
/* body>p{*/
/* background: #3cbda6;*/
/* }*/
/* 兄弟选择器 :只有一个，相邻（向下）*/
.active + p {
background: #a13d30;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>
结果图：
4.通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p{*/
/* background: #02ff00;*/
/*}*/
/* 后代选择器 */
/* body p{*/
/* background: red;*/
/* }*/
/* 子选择器*/
/* body>p{*/
/* background: #3cbda6;*/
/* }*/
/* 兄弟选择器 :只有一个，相邻（向下）*/
/* .active + p {*/
/* background: #a13d30;*/
/* }*/
/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
background: green;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>
结果图：
2.3结构 伪类选择器
伪类：是加了条件
<!--避免使用id class选择器-->
<style>
/* ul的第一个子元素*/
ul li:first-child{
background: green;
}
/* ul的最后一个子元素*/
ul li:last-child{
background: red;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--避免使用id class选择器-->
<style>
/* ul的第一个子元素*/
ul li:first-child{
background: green;
}
/* ul的最后一个子元素*/
ul li:last-child{
background: red;
}
/*选中p1:定位到父元素，选择当前的第一个元素
定位当前元素的同类元素的第一个当第一个元素不是p标签修改这里面p:nth-child(1)的数字即可
选择当前P元素的负级元素，选中父级元素的第一个子元素，并且是当前元素才生效
这个按顺序选，会被其它元素影响
*/
p:nth-child(2){
background: aqua;
}
/*选择父元素下的P的第二个元素，按照类型选 不会被其它的标签影响*/
p:nth-of-type(2){
background:yellow;
}
</style>
</head>
<body>
<!-- <h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
2.4属性选择器（常用）
id + class 结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 后代选择器-->
<style>
.demo a{
float:left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #2700ff;
text-align: center;
color:gray;
/*去掉下划线*/
text-decoration: none;
/* 外边距*/
margin-right: 5px;
/*粗体 字体的大小/行高*/
font: bold 20px/50px Arial;
}
/* 属性名， 属性名 = 属性值（正则）
= 是绝对等于
*= 是包含这个元素
^=以这个元素开头
$ 以这个元素结尾
*/
/* 存在ID属性的元素 a[]{}*/
/* a[id]{*/
/* background: yellow;*/
/* }*/
/*id=first的元素*/
/* a[id=first]{*/
/* background: yellow;*/
/* }*/
/* class中有links的元素*/
/* a[class*="links"]{*/
/* background: yellow;*/
/* }*/
/*!* 选择href中以http开头的元素*!*/
/* a[href^=http]{*/
/* background: yellow;*/
/* }*/
a[href$=doc]{
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<!-- target="_blank"在新页面打卡-->
<a href="http://blog.kuangstudy.com"class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item ">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc"class="links item">6</a>
<a href="/a.pdf"class="links item">7</a>
<a href="/abc.pdf"class="links item">8</a>
<a href="abc.doc"class="links item">9</a>
<a href="abcd.doc"class="links item last">10</a>
</p>
</body>
</html>
=
*=
^=
$=
3.美化网页元素
3.1 为什么要美化元素
1.有效的传递页面信息
2.美化网页，页面漂亮，才能吸引客户
3.凸显页面的主题
4.提高用户体验
span标签：重点要突出的字，使用span 套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习 <span id="title1">Java</span>
</body>
</html>
结果图：
3.2 字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
font-family:字体
font-size: 字体大小
font-weight:字体粗细
color: 字体颜色
-->
<style>
body{
font-family: "Arial Black",楷体;
color: brown;
}
h1{
font-size: 50px;
}
.p1{
font-weight:lighter ;
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
昔日顶级工程师卫三穿成星际失学儿童，靠着捡垃圾变废为宝，终于赶在开学季攒了一笔钱，立刻要去报名上学。
</p>
<p>
卫·文静·贫穷·工程师：“……”
</p>
<p>
When I wake up in the morning，
You are all I see;
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 字体风格
oblique ：斜体
bolder：加粗
12px：大小
-->
<style>
p{
font:oblique bolder 12px "楷体";
}
</style>
</head>
<body>
<p>
昔日顶级工程师卫三穿成星际失学儿童，靠着捡垃圾变废为宝，终于赶在开学季攒了一笔钱，
</p>
</body>
</html>
3.3 文本样式
1.颜色 color rgb rgba
2.文本对齐的方式 text-align = center
3.首行缩进 text-indent:2em
4.行高 line-height 单行文字上下居中：line height = height
5.装饰（如下划线） text-decoration
6.文本图片水平对齐：vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色表示：
单词
RGB：0-F
RGBA A: 0~1 A:是透明度设置
text-align:文本排版 居中 居左 居右
text-indent: 2em 段落 首行缩进两个字母
行高 和 块的高度一致 就可以上下居中:
height: 300px;
line-height: 300px;
text-decoration: underline 下划线
text-decoration: line-through; 中划线
text-decoration: overline; 上划线
-->
<style>
h1{
color: rgba(0,255,255,0.9);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: #2700ff;
height: 300px;
line-height: 300px;
}
.l1{
text-decoration: underline;
}
.l2{
text-decoration: line-through;
}
.l3{
text-decoration: overline;
}
/*a（标签）超链接去下划线*/
a{
text-decoration: none;
}
</style>
</head>
<body>
<!--a 标签默认有下划线-->
<a href="">111234</a>
<p class="l1">1234567</p>
<p class="l2">1234567</p>
<p class="l3">1234567</p>
<h1>故事介绍</h1>
<p class="p1">
昔日顶级工程师卫三穿成星际失学儿童，靠着捡垃圾变废为宝，终于赶在开学季攒了一笔钱，立刻要去报名上学。
</p>
<p>
卫·文静·贫穷·工程师：“……”她打算将来成为一个机甲师，据说特别赚钱，还和自己本行息息相关，成了一名机甲单兵
</p>
<p class="p3">
When I wake up in the morning，
You are all I see;
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
水平对齐要有参照物 如a 与 b
-->
<style>
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="data:images/7.jpg" alt="">
<span> abcnnnnnnxxnnnnnxn</span>
</p>
</body>
</html>
3.4阴影
/*text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径*/
#price{
text-shadow: #3cc7f5 10px -10px 2px;
}
3.5超链接伪类
正常情况下，a,a:hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认的颜色*/
a{
/* 除掉下滑线*/
text-decoration: none;
color: #000000;
}
/* 鼠标悬浮的状态*/
a:hover{
color: orange;
font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active{
color: green;
}
a:visited{
color: gray;
}
/*text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径*/
#price{
text-shadow: #3cc7f5 10px -10px 2px;
}
</style>
</head>
<body>
<a href="#">
<img src="data:images/11.jpg" alt="">
</a>
<p>
<a href="#">码出高效:Java开发手册</a>
</p>
<p>
<a href="">作者：孤近老师</a>
</p>
<p id="price">
￥99
</p>
</body>
</html>
3.6列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<link href="css/style.css"rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</div>
</body>
</html>
#nav{
width:300px;
background: grey;
}
.title{
font-size:18px;
font-weight: bold;
/*text-indent: 1em; 行间距缩进*/
text-indent: 1em;
line-height: 30px;
background: red;
}
/*ul li*/
/*ul{*/
/* background: grey;*/
/*}*/
ul li{
height: 30px;
/*list-style: none; 把每行前面的小点去掉
list-style: circle;把每行前面的实心小点变成空心
list-style: decimal;变成有序列表 数字
list-style: square;变成正方形
*/
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: #000;
}
a:hover{
color: orange;
text-decoration: underline;
}
修改加了图片的表格：
#nav{
width:300px;
background: grey;
}
.title{
font-size:18px;
font-weight: bold;
/*text-indent: 1em; 行间距缩进*/
text-indent: 1em;
line-height: 30px;
/*颜色 图片 图片位置 平铺方式*/
background: red url("../images/3.jpg") 200px 10px no-repeat;
}
/*ul li*/
/*ul{*/
/* background: grey;*/
/*}*/
ul li{
height: 30px;
/*list-style: none; 把每行前面的小点去掉
list-style: circle;把每行前面的实心小点变成空心
list-style: decimal;变成有序列表 数字
list-style: square;变成正方形
*/
list-style: none;
text-indent: 1em;
background-image: url("../images/2.jpg") ;
background-repeat: no-repeat;
background-position: 200px 2px;
}
a{
text-decoration: none;
font-size: 14px;
color: #000;
}
a:hover{
color: orange;
text-decoration: underline;
}
3.7背景
背景颜色
背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height:1200px;
/*border: 1px solid red;第一个为边框的粗细 第二个边框的样式 颜色*/
border: 1px solid red;
background-image: url("images/12.jpg");
/* 默认是全部平铺的*/
}
/*background-repeat: repeat-x;水平平铺*/
.div1{
background-repeat: repeat-x;
}
/* background-repeat: repeat-y;垂直平铺*/
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!--div默认为空标签 可以在里面放东西-->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
网站：Grabient
3.8渐变
<style>
body{
background-color: #FFFFFF;
background: linear-gradient(19deg,#21D4FD 0%, #97ff21 100%);
}
4盒子模型
4.1什么是盒子
margin:外边距
padding:内边距
border:边框
4.2边框
1.边框的粗细
2.边框的样式
3.边框的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1,u1,li,a,body{
/*body 总有一个默认的外边距margin = 0 padding: 0 常见操作;
text-decoration: none; */
margin: 0;
padding: 0;
text-decoration: none;
}
/*border: 粗细 样式 颜色*/
#box{
/*border: 粗细 样式 颜色*/
width: 300px;
border:1px solid red ;
}
h2{
font-size: 16px;
background-color: #3cbda6;
line-height: 30px;
color: white;
}
/* form标签选择器*/
form{
background: #3cbda6;
}
div:nth-of-type(1) input{
border: 3px solid black;
}
/*dashed 虚线*/
div:nth-of-type(2) input{
border: 2px dashed #4d0b8c;
}
div:nth-of-type(3) input{
border: 2px dashed #008c27;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="text">
</div>
<div>
<span>邮箱:</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
4.3内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外边距的妙用：居中元素-->
<style>
/*border: 粗细 样式 颜色*/
#box{
/*border: 粗细 样式 颜色*/
width: 300px;
border:1px solid red ;
/*margin: 0 auto; 上下为0 左右自动对齐 margin 里面有四个元素 上下左右 写两个就代表前一个是上下 后一个是左右*/
margin: 0 auto;
}
/*
顺时针旋转
margin:0 上下左右
margin: 0 1px 0代表上下 1px 代表左右
margin: 0 1px 2px 3px 上右下左
*/
h2{
font-size: 16px;
background-color: #3cbda6;
line-height: 30px;
color: white;
margin:0 1px 2px 3px;
}
/* form标签选择器*/
form{
background: #3cbda6;
}
input{
border: 1px solid black;
}
div:nth-of-type(1){
padding: 10px 2px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="text">
</div>
<div>
<span>邮箱:</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
盒子的计算方式：你的元素到底多大？
margin + border + padding + 内容宽度
第49天学习打卡（CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型）的更多相关文章
- 从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 学习css常用基本层级伪类属性选择器
常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...
- CSS选择器：伪类（图文详解）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式. ...
- CSS基础--属性选择器、伪类选择器
属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- css 04-CSS选择器：伪类
04-CSS选择器:伪类 #伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就 ...
- css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
- CSS基础 结构伪类选择器 last-child、first-child和nth-of-type的使用方法
一.通过伪类选择器查找单个标签元素html结构 <div> <a herf='#'>导航1</a> <a herf='#'>导航2</a> ...
- HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别
css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...
随机推荐
- httprunner（4）录制生成测试用例
前言 写用例之前,我们应该熟悉API的详细信息.建议使用抓包工具Charles或AnyProxy进行抓包. har2case 我们先来了解一下另一个项目har2case 他的工作原理就是将当前主流的抓 ...
- Java一些概念
1.Java先编译后解释 同一个.class文件在不同的虚拟机会得到不同的机器指令(Windows和Linux的机器指令不同),但是最终执行的结果却是相同的. 2.JDK包含JRE,JRE包含JVM, ...
- jmespath（1）基础语法
前言 JMESPath是JSON的查询语言.您可以从JSON文档中提取和转换元素 官方文档:https://jmespath.org/tutorial.html 基本表达式 JMESPath用的最多的 ...
- 【uva 1658】Admiral（图论--网络流 最小费用最大流）
题意:有个N个点M个边的有向加权图,求1~N的两条不相交路径(除了起点和终点外没有公共点),使得权和最小. 解法:不相交?也就是一个点只能经过一次,也就是我后面博文会讲的"结点容量问题&qu ...
- Codeforces Round #682 (Div. 2) B. Valerii Against Everyone (思维)
题意:给你一组数\(b\),对于每个\(b_i\),相对应的\(a_i=2^{b_i}\),问你是否能找出两个不相交的区间,使得两个区间的\(a_i\)的元素和相等. 题解:对于任意一个\(2^k\) ...
- HDU - 2159 dp
题目: 最近xhd正在玩一款叫做FATE的游戏,为了得到极品装备,xhd在不停的杀怪做任务.久而久之xhd开始对杀怪产生的厌恶感,但又不得不通过杀怪来升完这最后一级.现在的问题是,xhd升掉最后一级还 ...
- MySQL中为避免索引失效所需注意的问题
一.索引介绍 二.索引的优势与劣势 1.优势 类似于书籍的目录索引,提高数据检索的效率,降低数据库的IO成本. 通过索引列对数据进行排序,降低数据排序的成本,降低CPU的消耗. 2.劣势 实际上索引也 ...
- 支撑性服务 & 自动化
连载传送门: 什么是云原生? 云原生设计理念 .NET 微服务 谈到云原生,绕不开"容器化" Backing services 云原生系统依赖于许多不同的辅助资源,例如数据存储.消 ...
- 用阿里云ecs部署kubernetes/K8S的坑（VIP、slb、flannel、gw模式）
1 阿里云ecs不支持keepalived vip 1.1 场景描述 本来计划用keepalived配合nginx做VIP漂移,用以反代多台master的apiserver的6443端口,结果部署了v ...
- Python——Django框架——Model数据库模型
一.设置 1.Django的setting中配置数据库(MySQL配置) DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql' ...