第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 ...
随机推荐
- Java 容器系列总结
为什么要使用集合 当我们需要保存一组类型相同的数据的时候,我们应该是用一个容器来保存,这个容器就是数组,但是,使用数组存储对象具有一定的弊端, 因为我们在实际开发中,存储的数据的类型是多种多样的,于是 ...
- CF - 392 C. Yet Another Number Sequence （矩阵快速幂）
CF - 392 C. Yet Another Number Sequence 题目传送门 这个题看了十几分钟直接看题解了,然后恍然大悟,发现纸笔难于描述于是乎用Tex把初始矩阵以及转移矩阵都敲了出来 ...
- Broken robot CodeForces - 24D （三对角矩阵简化高斯消元+概率dp）
题意: 有一个N行M列的矩阵,机器人最初位于第i行和第j列.然后,机器人可以在每一步都转到另一个单元.目的是转到最底部(第N个)行.机器人可以停留在当前单元格处,向左移动,向右移动或移动到当前位置下方 ...
- hdu 1517 Multiplication Game
题意: 用整数p乘以2到9中的一个数字.斯坦总是从p = 1开始,做乘法,然后奥利乘以这个数,然后斯坦,以此类推.游戏开始前,他们画一个整数1 < n < 4294967295,谁先到达p ...
- Network of Schools POJ - 1236 有向强连通图
//题意://给你n个学校,其中每一个学校都和一些其他学校有交流,但是这些边都是单向的.你至少需要给几个学校//传递消息可以使全部学校都收到消息,第二问你最少添加几条边可以使它变成一个强连通图//题解 ...
- 计算文件MD5
计算文件MD5 def get_md5(file_path): md5 = None if os.path.exists(file_path): f = open(file_path, 'rb') m ...
- Dubbo和SpringCloud的优劣势比较--总体架构
从整体架构上来看 二者模式接近,都需要服务提供方,注册中心,服务消费方.差异不大.详见下方: Dubbo Provider: 暴露服务的提供方,可以通过jar或者容器的方式启动服务 Consumer: ...
- Redis性能指标监控
监控指标 •性能指标:Performance•内存指标: Memory•基本活动指标:Basic activity•持久性指标: Persistence•错误指标:Error 性能指标:Perform ...
- 根据直方图 histogram 进行简单的图像检索
https://github.com/TouwaErioH/Machine-Learning/tree/master/image%20identification/Histogram%20retrie ...
- 关于FFT的一些理解，以及如何手工计算FFT加深理解和验证正确性
总结缺少逻辑性和系统性,主要便于自己理解和记忆 关于一维FFT的 于是复系数Cn是图像傅里叶变换的yn列向量 于是我们看到最后引入,Cn这个复系数的模来表征频率波的振幅记为Sn(即简谐波叠加的数量 然 ...