一. CSS选择器
1.css引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 嵌入式 -->
<style>
p {
color: #0d93ff;
font-size: 30px;
}
</style>
<!-- 外链式: 常用. 符合解耦合 -->
<link rel="stylesheet" href="css/a.css">
<!-- 导入式: 了解 -->
<style>
@import url(css/a.css);
</style>
</head>
<body>
<!--行内式-->
<!--<p style="color:red;font-size: 50px">你好呀</p>-->
<p>来冲啊</p>
</body>
</html>
css样式后面的样式会将前面的覆盖
2.基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- id选择器-->
<style>
#p1 {
color: red;
}
</style>
<!-- 类选择器 -->
<style>
.p2 {
color: yellow;
font-size: 50px;
text-decoration: underline;
}
</style>
</head>
<body>
<p class="p2">111</p>
<p id="p1">222</p>
<p class="p2">333</p>
</body>
</html>
3.选择器后代与兄弟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 组合选择器不一定必须是标签名. 常配合类属性使用-->
<style>
/*匹配div子孙后代中含有p标签的*/
div p {
color: #0d93ff;
}
/* 相邻兄弟选择器: 只会向下找相邻兄弟*/
div+p {
color: red;
font-size: 50px;
}
/* 同级选择器. 向下*/
div~p {
color: yellow;
}
/* 儿子选择器: 只找儿子节点*/
div>p {
color: red;
}
/* 借助类选择器定位的p标签 */
.box2 ul p {
color: green;
}
</style>
</head>
<body>
<p>我是你爹</p>
<div>
<p>哈哈啊哈哈哈</p>
<ul>
<li>
<ul>
<li>
<p>孙庆军</p>
</li>
<li>
<p>给我冲</p>
</li>
<li>
<p>快点</p>
</li>
</ul>
</li>
</ul>
</div>
<hr>
<p>我是儿子</p>
<div class="box2">
<p>hello world</p>
<ul>
<li>
<ul>
<li>
<p>what</p>
</li>
<li>
<p>are you doing</p>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
4.交并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*一般是标签名配合类属性进行使用*/
/*交集选择器*/
div.box1 {
font-size: 100px;
color: yellow;
}
/*并集选择器*/
div,h1 {
color: red;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>
<p>我是孙庆军</p>
<h2>我想冲</h2>
<a href="">点我啊</a>
</li>
</ul>
</div>
<h1 class="box1">恩额嗯</h1>
</body>
</html>
5.序列选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 同级别中第一个是p标签 */
p:first-child {
color: red;
}
/* 同级别中最后一个是p标签 */
p:last-child {
color: yellow;
}
/* 同级别中第三个是p标签 */
p:nth-child(3) {
color: green;
}
/* 同级别中寻找第一个p标签 */
p:first-of-type {
color: royalblue;
}
/* 同级别中寻找最后一个p标签 */
p:last-of-type {
color: #2f0099;
}
/* 同级别中寻找p标签中的第三个*/
p:nth-of-type(3) {
color: #e700b9;
}
/* 同一级别只有一个p标签的 */
p:only-child {
color: #9e2633;
}
/* 同一级别同一类型 */
p:only-of-type {
color: red;
}
</style>
</head>
<body>
<h1>what</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
<a href=""></a>
<p>我是段落7</p>
<p>我是段落8</p>
<ul>
<li>
<table></table>
<p>我是菜鸡</p>
<a href=""></a>
</li>
</ul>
</div>
</body>
</html>
6.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
/* 属性选择器是完全匹配.如果想多匹配只能加上各种通配符 */
[id] {
color: red;
}
p[id] {
font-size: 30px;
}
p[class="part1"] {
color: green;
}
a[href^="https"] {
font-size: 50px;
}
img[src$="png"] {
width: 100px;
}
[class*="part"] {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1 id="id1">哈哈啊</h1>
<p id="id2">我是段落</p>
<p class="part1">我是段落</p>
<p class="xxx part2 yyy">我是段落</p>
<a href="#">我是我</a>
<a href="http://www.baidu.com">http://www.baidu.com</a>
<a href="https://www.baidu.com">https://www.baidu.com</a>
<img src="1.png" alt="">
<img src="2.jpg" alt="">
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
7.伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*超链接样式*/
a:link {
color: red;
}
/*鼠标在超链接上悬浮*/
a:hover {
color: blue;
font-size: 50px;
}
/*超链接长按*/
a:active {
color: green;
}
/*超链接点击后*/
a:visited {
color: red;
}
/*标签点击*/
input:focus {
background: red;
outline: none;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">啥鬼额</a>
<p>
用户名:<input type="text" >
</p>
</body>
</html>
8.伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*对首字母进行操作*/
p:first-letter {
font-size: 50px;
}
/*在p标签前面加东西*/
p:before {
content: '*';
color: red;
}
/*在p标签后面加东西*/
p:after {
content: '//';
color: green;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
9.css三大特性
1. 继承性
定义: 给某一个元素设置一些属性中. 该元素后代也可以使用. 这个就是继承性
注意:
1. 只有以color.font-.text-.line-开头的属性才可以继承
2. a标签的文字颜色和下划线是不能继承别人的
3. h标签的文字大小是不能继承别人的. 会变大. 但会在原来字体的基础上变大
应用场景:
通常基于继承性同一设置网页的文字颜色. 字体. 文字大小等样式
2. 层叠性
定义: css: Cascading StyleSheet层叠样式表.层叠性指的是css处理冲突的一种能力
多个选择器选中一个标签会产生覆盖效果
注意:
1. 层叠性只有在多个选择器选中了同一个标签. 然后设置了相同的属性. 才回发生层叠性
3. 优先级
定义: 当多个选择器选中同一个标签.并且给同一个标签设置相同的属性时. 如何层叠就由优先级来决定
优先级:
整体优先级从高到低: 行内样式>嵌套样式和外部样式
1. 大前提: 直接选中>间接选中(即继承而来的)
#1、以下为直接选中
<style type="text/css">
#id1 {
color: red;
}
.ppp {
color: green;
}
p {
color: blue;
}
</style>
#2、以下为间接选中
<style type="text/css">
ul {
color: yellow;
}
</style>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
2. 如果都是直接选中. 那么谁离目标标签比较近. 就听谁的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
/*离目标近*/
li {
color: red;
}
/*离目标远*/
ul {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
</body>
</html>
3. 如果都是直接选中. 并且都是同类型的选择器. 那么就是谁写的后面就听谁的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
p {
color: red;
}
/*同样都是标签选择器，谁写在后面谁生效*/
p {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
</body>
</html>
4. 如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠
id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）
5. 添加!important可强制修改优先级
* {
color: yellow !important;
}
二. CSS样式布局
1.文字属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-weight: bolder;
font-style: italic;
font-size: 50px;
font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, monospace;
/*可直接按照顺序写一行*/
/*font: bolder italic 50px "Bitstream Vera Sans";*/
/*设置颜色 透明度*/
color: rgba(200, 100, 500, 0.5);
}
</style>
</head>
<body>
<p>一行白鹭上青天</p>
</body>
</html>
2.文本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background: red;
/*文本排列*/
/*text-align: center;*/
/*设置字体高度适配*/
line-height: 200px;
/*text-decoration: underline;*/
text-decoration: line-through;
/*设置缩进*/
text-indent: 20px;
}
</style>
</head>
<body>
<div>
你干嘛...
</div>
</body>
</html>
3.背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
/*设置盒子大小*/
width: 500px;
height: 500px;
background-color: red;
/*背景图片会平铺整个背景*/
background-image: url(img/dog.jpg);
/*可以设置跟背景一个大小. 设置x轴. y轴也会适配*/
background-size: 100px 100px;
background-repeat: no-repeat;
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*设置背景图片的位置*/
/*background-position: 水平方向 垂直方向位置;*/
background-position: left top;
/*可以在当前标签中固定或随着页面滚动而滚动*/
background-attachment: fixed;
}
.box2 {
width: 200px;
height: 200px;
background: #9261ff;
}
</style>
</head>
<body>
<div class="box1">
<!-- 图片背景只是个背景. 不会占用位置. 这一串数字会出现在图片上面-->
<p>12739812379</p>
</div>
<div class="box2">
fasdfasd
</div>
</body>
</html>
背景图片和插入图片的区别:
1、
背景图片仅仅只是一个装饰，不会占用位置，
插入图片会占用位置
2、
背景图片有定位属性，可以很方便地控制图片的位置，
而插入图片则不可以
3、
插入图片语义比背景图片的语义要强，所以在企业开发中如果你的图片
想被搜索引擎收录，那么推荐使用插入图片
4.导航条拼接
练习：累计成一个大背景可以减少带宽，流量
前端优化方式：1.静态文件压缩，下载到本地，减少空间 2.使用精灵图，减少发送网络io次数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*导航条拼接*/
.box1 {
width: 100%;
height: 50px;
background-image: url(img/dht.png);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
5.精灵图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*将大图片的指定位置移动到小div的位置显示. 实现截取部分图标*/
.box1 {
width: 86px;
height: 28px;
background-image: url(img/icon.png);
background-position: -425px -100px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
6.盒子边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*设置边框样式*/
.box1 {
width: 200px;
height: 200px;
background: red;
/*border: 1px solid black;*/
/*border: 1px dotted black;*/
/*border-width: 1px 2px 3px 4px;*/
/*border-style: solid dotted dashed double;*/
/*border-color: blue darkgreen black #FCFDFA;*/
border: 1px solid black;
/*添加弧度边框*/
border-radius: 10px;
/*控制文本*/
text-align: center;
/*奇淫技巧*/
line-height: 200px;
}
</style>
</head>
<body>
<div class="box1">
11111
</div>
</body>
</html>
7.内边距
注意: 1 给标签设置内边距后，标签内容占有的宽度和高度会发生变化，设置padding之后标签内容的宽高是在原宽高的基础上加上padding值。如果不想改变实际大小，那就在用宽高减掉padding对应方向的值 2 padding是添加给父级的，改变的是父级包含的内容的位置 3 内边距也会有背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 150px;
height: 150px;
border: 1px solid black;
background-color: red;
}
.box1 {
padding-bottom: 50px;
}
.box2 {
padding-top: 50px;
}
.box3 {
padding-left: 50px
}
.box4 {
padding-right: 50px
}
.box5 {
padding: 70px;
}
</style>
</head>
<body>
<div class="box1">我是文字我是文字</div>
<hr>
<div class="box2">我是文字我是文字</div>
<hr>
<div class="box3">我是文字我是文字</div>
<hr>
<div class="box4">我是文字我是文字</div>
<hr>
<div class="box5">我是文字我是文字</div>
</body>
</html>
8.外边距
一、！！！css显示模式:块级、行内、行内块级
在HTML中HTML将所有标签分为两类，分别是容器级和文本级
在CSS中CSS也将所有标签分为两类，分别是容器级是块级元素和行内元素
#1、HTML中容器级与文本级
容器级标签：可以嵌套其他的所有标签
div、h、ul>li、ol>li、dl>dt+dd
文本级标签：只能嵌套文字、图片、超链接
span、p、buis、strong、em、ins、del
#2、CSS中块级与行内
块级：块级元素会独占一行，所有的容器类标签都是块级，文本标签中的p标签也是块级
div、h、ul、ol、dl、li、dt、dd 还有标签p
行内：行内元素不会独占一行，所有除了p标签以外的文本标签都是行内
span、buis、strong、em、ins、del
行内块级
img
#3、块级元素与行内元素的区别
1、块级元素block
独占一行
可以设置宽高
若没有设置宽度，那么默认和父元素一样宽（比如下例中的div的父元素是body，默认div的宽就是body的宽）
若没有设置宽高，那么就按照设置的来显示
2、行内元素inline
不会独占一行
不可以设置宽高
盒子宽高默认和内容一样
3、行内块级元素inline-block
不会独占一行
可以设置宽高
二、！！！CSS显示模式转换
可以通过标签的display属性设置显示模式
none HTML 文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用
block 块级
inline 行内
inline-block 行内块级
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*去掉默认外边距.内边距*/
* {
padding: 0;
margin: 0;
}
div {
width: 150px;
height: 150px;
}
/*margin设置外边距*/
.box1 {
border: 1px solid red;
margin-top: 100px;
margin-left: 100px;
margin-bottom: 70px;
/*padding-top: 30px;*/
/*padding-left: 30px;*/
box-sizing: border-box;
}
.box2 {
border: 1px solid green;
margin-top: 60px;
}
/*设置成行内块级
1、外边距的那一部分是没有背景颜色的
2、外边距合并现象
在默认布局的水平方向上，默认两个盒子的外边距会叠加
而在垂直方向上，默认情况下两个盒子的外边距是不会叠加的，会出现合并现象，谁的外边距比较大，就听谁的*/
.box3 {
border: 1px solid blue;
display: inline-block;
margin-right: 50px;
}
.box4 {
border: 1px solid yellow;
display: inline-block;
margin-left: 100px;
}
.box5 {
border: 1px solid grey;
}
/*位于box1的内容嵌套中*/
.boxx {
width: 20px;
height: 20px;
background-color: red;
/*margin-top: 30px;*/
/*margin-left: 30px;*/
}
</style>
</head>
<body>
<div class="box1">
1111
<div class="boxx"></div>
</div>
<div class="box2">
22222
</div>
<div class="box3">
333
</div>
<div class="box4">
4444
</div>
<div class="box5">
5555
</div>
</body>
</html>
9.盒子居中及内容居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 600px;
background-color: red;
/*设置行高和内边距让文本居中*/
text-align: center;
line-height: 25px;
padding-top: 250px;
padding-bottom: 250px;
/*自动减小padding填充的*/
box-sizing: border-box;
/*盒子相对于父元素水平居中*/
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊
</div>
</body>
</html>
10.文字溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: red;
word-break: break-all;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
fadfkadjsfkljdddddddkaldfja;ldsfjdkl;ajfkl;djfkadlksfjdklfjadklfjadslk
</div>
<hr>
<div class="box2">fasdkffadsfasdfasdfasdfdasfadsfddsjf</div>
</body>
</html>
标签：
留言评论