第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 ...
随机推荐
- python里正则表达式基础及注意事项
感觉正则匹配是一件很酷的事,用得好的话可以极大地提高编程效率.虽然在html中BeautifulSoup更好用一些,但有时候还是需要使用正则匹配.所以就此做一些学习和使用过程中的笔记. python有 ...
- Codeforces Round #692 (Div. 2, based on Technocup 2021 Elimination Round 3) C. Peaceful Rooks (思维,dsu找环)
题意:一个棋盘上有一些"车",现在要让这些"车"跑到左倾斜的对角线上,每次可以移动一个棋子,但是棋盘的任意时刻都不能出现一个"车"能吃另一个 ...
- Java15变量竟然没什么区别，八大基本数据类型你知道吗？
变量是什么? 变量是用来为不同数据类型在内存中分配的空间用来储存该数据. 不同于python这样的弱类型语言,变量声明不需要定义数据类型,就和写数学方程式一般,谁等于谁即可.而Java这个发展了多个版 ...
- _.shuffle、_.debounce中下划线对象的理解
Vue 官方教程中有_.shuffle._.debounce,不明白"_"是怎么来的,有什么意义? Lodash 和 Underscorejs 都有相关解释
- spring-cloud-netflix-config
Spring Cloud Config 在我们了解spring cloud config之前,我可以想想一个配置中心提供的核心功能应该有什么 提供服务端和客户端支持 集中管理各环境的配置文件 配置文件 ...
- sqlmap 详解
sqlmap 使用总结 0x01 需要了解 当给 sqlmap 这么一个 url 的时候,它会:1.判断可注入的参数 2.判断可以用那种 SQL 注入技术来注入 3.识别出哪种数据库 4.根据用户 ...
- Linux 驱动框架---dm9000分析
前面学习了下Linux下的网络设备驱动程序的框架inux 驱动框架---net驱动框架,感觉知道了一个机器的大致结构还是不太清楚具体的细节处是怎么处理的,所以今天就来以dm9000这个网上教程最多的驱 ...
- js & replaceAll & non-global RegExp bug
js & replaceAll https://caniuse.com/#search=replaceAll https://developer.mozilla.org/en-US/docs/ ...
- how to get window width in javascript
how to get window width in javascript how to get window width in js How to Detect Screen Resolution ...
- 2020 web developer roadmap
2020 web developer roadmap https://github.com/kamranahmedse/developer-roadmap https://roadmap.sh/ ht ...