目录
CSS
层叠样式表 给 HTML标签添加样式，美化
注释
# 注释
/*单行注释*/
/*多行注释
多行注释
*/
用注释划定样式区域
css语法结构
选择器{
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;....}
css三种引入方式
css三种引入方式
1.style标签内部直接书写
<style>
h1{
color: red;
}
</style>
2.link 标签引入css(最正规的方式)
<link rel="stylesheet" href="03%20css.css">
3.行内式(一般不用)
<h1 style="color: greenyellow">hello world</h1>
CSS选择器
基本选择器
学习流程
# 调样式
1.如何查找标签
css查找标签方式(后续的框架查找语句都是基于css)
2.如何添加样式
- id 选择器
/*id选择器*/
#d1 { /*找到d1把其变成绿黄*/
color: greenyellow;
}
- 类选择器
/*类选择器*/
/*含有c1的改为红色*/
.c1{ /*找到值class 包含c1标签*/
color: red;
}
- 标签/元素选择器
/*标签/元素选择器*/
span{ /*找到span标签*/
color: red;
}
- 通用选择器
/*通用选择器*/
* { /*把html中的所有变为绿色*/
color: green;
}
组合选择器
后代选择器
/*后代选择器*/
div span{ /*div中所有的都改为红色*/
color: red;
}
儿子选择器
/*儿子选择器(第一层级)*/
div>span{
color: greenyellow;
}
毗邻选择器
/*毗邻选择器*/
/* 同级别紧挨着的下一个*/
div+span{
color: aqua;
}
弟弟选择器
/* 弟弟选择器*/
div~span{
/* 同级别选择器*/
color: brown;
}
属性选择器
1.含有某个属性
2.含有某个属性并且有某个值
3.含有某个属性并且有某个值的标签
属性选择器是以[] 作为标志的
<style>
/*[username] {*/
/* !*把所有的属性名为 username的标签改为红色*!*/
/* background-color: red;*/
/*}*/
/*[username='tony']{*/
/* */
/* color: aqua;*/
/*}*/
input[username='tony']{
color: red;
}
</style>
分组与嵌套
[，] 表示并列关系 空格表示下一级
<!-- 同级别颜色黄色-->
div, p, span {
color: yellow;
}
不同选择器之间也可以使用,
#d1, .c1,span{
color: yellow;
}
<body>
<div id="d1">div</div>
<p class="c1">p</p>
<span>span</span>
</body>
伪类选择器
以a标签为例
鼠标悬浮状态
/*鼠标悬浮状态*/
a:hover{
color: aqua;
}
访问之前的状态
a:link{
/*访问之前的状态*/
color: red;
}
鼠标点击不松开的状态/ 激活态
/*鼠标点击不松开的状态/ 激活态*/
a:active{
color: blue;
}
访问之后的状态
a:visited{
/*访问之后的状态*/
color: darkgray;
}
伪元素选择器
first-letter 第一个文字调整
p:first-letter{
font-size: 48px;
color: orange;
}
before 在文本开头 用css添加内容,鼠标选不中
p:before{
/* 在文本开头 用css添加内容,鼠标选不中*/
content: '天气黑了';
color: orange;
}
after 在文本结束 用css添加内容,鼠标选不中
p:after{
content: '你好';
color: darkgray;
}
before 和after 通常是用来清除浮动的影响，父标签塌陷的问题
选择器优先级
id选择器
类选择器
标签选择器
行内选择器
行内选择器 > id选择器 > 类选择器 > 标签选择器
精确度越高越有效
CSS属性相关(操作标签内容)
长宽设置
p {
background-color: red;
height: 200px;
width: 400px;
}
span {
background-color: greenyellow;
/* 行内标签无法设置长宽*/
}
字体属性
/*字体*/
/*font-family: "Microsoft Himalaya";*/
/*字体大小*/
/*font-size: 24px;*/
/*字体加粗*/
/*bolder lighter 100~900*/
/*inherit 继承父元素的粗细值*/
/*font-weight: bolder;*/
/*直接写英文颜色*/
/*color: red;*/
/*颜色标号*/
/*color: #eeeeee;*/
/*三基色 0-255*/
/*color: rgb(255,0,0);*/
/*第四个数位是字体颜色的参数 0-1*/
color: rgb(64, 64, 64);
/* 获取颜色的工具*/
/* pycharm自带的取色器*/
/* qq 微信截图*/
文字属性
p {
/*center 居中*/
/*text-align: center;*/
/*text-align: right;*/
/*text-align: left;*/
/* 文字的装饰*/
/* 文字底带一条线*/
/* text-decoration: underline;*/
/*文字头部带一条线 */
/*text-decoration: overline;*/
/*文字中间带一条线*/
/*text-decoration: line-through;*/
/*没有任何样式*/
/*text-decoration: none;*/
/*首行缩进2空格*/
font-size: 16px;
text-indent: 32px;
}
/*a {*/
/* !*去掉a标签的下划线*!*/
/* text-decoration: none;*/
/*}*/
背景属性
在调节样式的时候可以借助浏览器微调，然后再将调整好的参数修改到html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 4000px;
width: 4000px;
/*background-color: red;*/
/* 背景图片*/
/* 默认全部铺满*/
/* background-image: url("111.png");*/
/*no-repeat 不铺满 repeat铺满*/
/*background-repeat: no-repeat;*/
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*第一个左右x 第二个上下y*/
/*background-position: center center;*/
/* 如果出现了多个属性名前缀是一样的情况 一般情况下
可以简写 只写一个前缀*/
background: red url("111.png") no-repeat center center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
border: 3px solid red;
}
#d1 {
background-color: greenyellow;
height: 400px;
width: 400px;
border-radius: 50%;
}
</style>
</head>
<body>
<p>nnnnnnnnnnnnnnnnnnnnn</p>
<div id="d1"></div>
</body>
</html>
display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
/*隐藏标签不展示到前端
原来位置不再占用，文档之中还是有*/
/*display: none;*/
/*将标签设置为行内标签的特点 一行显示不能设置长宽*/
/*display: inline;*/
/*将标签设置为块级标签的特点*/
/*display: block;*/
/*标签可以在一行显示也可设置长宽*/
display: inline-block;
height: 100px;
width: 100px;
background-color: red;
}
#d2 {
display: inline-block;
height: 100px;
width: 100px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="d1">01</div>
<div id="d2">02</div>
<!--单纯的隐藏-->
<div style="visibility: hidden">003</div>
</body>
</html>
盒子模型
标签和标签之间的距离 margin
标签的边框 border
内部到边框的距离 padding
物体的大小 content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body {*/
/* !*上下左右都为0*!*/
/* !*margin: 0;*!*/
/* !*第一个上下 第二个左右*!*/
/* !*margin: 10px 20px;*!*/
/* !*上右下左*!*/
/* !*不叠加*!*/
/* !*margin: 10px 20px 30px 40px;*!*/
/* !*只能做到标签的左右居中*!*/
/* margin: 0 auto;*/
/*}*/
p {
border: 3px solid blue;
/*上下左右*/
/*规律和padding一样*/
/*padding-left: 10px;*/
/*padding-right: 20px;*/
/*padding-top: 30px;*/
/*padding-bottom: 40px;*/
padding: 10px;
/*padding: 10px 20px 30px 40px;*/
}
</style>
</head>
<body>
<!--<p style="border: red">ppppp</p>-->
<p>ddddddddddd</p>
</body>
</html>
浮动
浮动的元素，浮起来原本占多大就多大
涉及到页面的布局 一般都使用浮动来提前规划好布局
浮动带来的影响
# 浮动会造成父标签塌下的问题
/*解决浮动带来的影响步骤*/
/*添加高度*/
/*height: 100px;*/
/*使用clear*/
/*该标签的左边不能有浮动的元素(空中和地面)*/
clear: left;
解决浮动带来的影响方法
在写html时候，先提前写好处理浮动带来影响的代码 css代码
.clearfix:after{
content: '';
display: block;
clear: both;
}
之后只要出现了标签塌陷的问题就在出现塌陷标签出jias class clearfix属性即可
通用的
溢出属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
height: 100px;
width: 100px;
border: red solid 10px;
/* 溢出*/
/* 默认溢出*/
/* overflow: visible;*/
/* 溢出部分隐藏*/
/* overflow: hidden;*/
/* 使其滚动*/
/* overflow: scroll;*/
/* 自动*/
overflow: auto;
}
</style>
</head>
<body>
<p>写到水穷天杪,定非尘土间人写到水穷天杪,定非尘土间人写到水穷天杪,定非尘土间人写到水穷天杪,定非尘土间人写到水穷天杪,定非尘土间人</p>
</body>
</html>
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
background-color: #4e4e4e;
}
#d1 {
height: 100px;
width: 100px;
border: 5px solid red;
margin: 0 auto;
border-radius: 50px;
}
#d1>img {
width: 100%;
}
</style>
</head>
<body>
<div id="d1">
<img src="001.jpg" alt="">
</div>
</body>
</html>
定位
- 静态
- 所有标签默认都是静态的 static 无法改变位置
- 相对定位(了解)
- 相对于标签的原来的位置做移动 relative
/*相对定位*/
/*#d1 {*/
/* height: 100px;*/
/* width: 100px;*/
/* background-color: blue;*/
/* !*从左往右 负数相反*!*/
/* left: 50px;*/
/* !*从上往下*!*/
/* top: 50px;*/
/* !*默认是static无法修改位置*!*/
/* !*position: static;*!*/
/* !*相对定位*!*/
/* !*标签由原来没有定位的标签变为有定位的标签*!*/
/* !*由static-->relative*!*/
/* position: relative;*/
/*}*/
- 绝对定位(常用)
- 相对于已经定位过的父标签移动，如果没有父标签则以body为参照
- 不知道其他标签的位置时，只知道父标签的参数，可以通过父标签进行定位
/*绝对定位*/
/*先相对定位 通过绝对定位确定位置*/
#d2{
height: 100px;
width: 200px;
background-color: red;
position: relative;
}
#d3 {
height: 400px;
width: 400px;
background-color: yellow;
position: absolute;
left: 200px;
top: 100px;
}
-
固定定位(常用)
- 相对于浏览器窗口固定在一个位置
# 返回顶部标签 #d4 { position: fixed; bottom: 10px; right: 20px; height: 10px; width: 10px; background-color: wheat; border: 3px solid blue; }
浏览器优先展示文本内容
验证浮动和定位是否脱离文档流
# 原来的位置是否还在(脱离文档流)
'''
浮动
相对定位
绝对定位
固定定位
'''
# 不脱离文档流
相对定位
# 脱离文档流
浮动
绝对定位
固定定位
<!--<!–相对定位 不脱离文档流–>-->
<!--<div style="height: 100px; width:100px; background-color: red; position: relative; left: 100px" ></div>-->
<!--<div style="height: 100px; width:100px; background-color: yellow"></div>-->
<!--绝对定位 脱离文档流 没有父标签则以body为参照-->
<!--<div style="height: 100px;width: 100px;background-color: red"></div>-->
<!--<div style="height: 100px;width: 100px;background-color: blue;position: absolute; left: 100px"></div>-->
<!--<div style="height: 100px;width: 100px;background-color: black"></div>-->
<!--固定定位 脱离文档流 -->
<div style="height: 100px;width: 100px;background-color: red"></div>
<div style="height: 100px;width: 100px;background-color: blue;position: fixed; bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 100px;background-color: black"></div>
z-index 模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.cover {
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99;
}
.modal {
height: 200px;
width: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
margin-top: -100px;;
margin-left: -200px;;
}
</style>
</head>
<body>
<div>最底层页面</div>
<div class="cover"></div>
<div class="modal">
<h1>登录页面</h1>
<p>username <input type="text"></p>
<p>password <input type="text"></p>
<button>点击登录</button>
</div>
</body>
</html>
透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1 {
background-color: rgba(0,0,0,0.5);
}
#p2{
opacity: 0.5;
color: blue;
}
</style>
</head>
<body>
<p id="p1">111</p>
<p id="p2">222</p>
</body>
</html>
简单博客园首页搭建
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blog</title>
<link rel="stylesheet" href="blog_css.css">
</head>
<body>
<div class="blog-left">
<div class="blog-picture">
<img src="001.jpg" alt="博客头像">
</div>
<div class="blog-title">
<p>博客用户名</p>
</div>
<div class="blog-info">
<p>博客信息</p>
</div>
<div class="blog-link">
<ul>
<li><a href="">关于</a>
<a href="">微信公众号</a>
<a href="">博客</a>
</li>
</ul>
</div>
<div class="blog-class">
<ul>
<li><a href="">#Python</a></li>
<li><a href="">#Java</a></li>
<li><a href="">#Golang</a></li>
</ul>
</div>
</div>
<div class="blog-right">
<div class="article">
<div class="article-title">
<span class="title">标题</span>
<span class="date">2021/02/03</span>
</div>
<div class="article-body">
<p>文章内容</p>
</div>
<hr>
<div class="article-bottom">
<span>#Python  </span>
<span>#Java</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">标题</span>
<span class="date">2021/02/03</span>
</div>
<div class="article-body">
<p>文章内容</p>
</div>
<hr>
<div class="article-bottom">
<span>#Python  </span>
<span>#Java</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">标题</span>
<span class="date">2021/02/03</span>
</div>
<div class="article-body">
<p>文章内容</p>
</div>
<hr>
<div class="article-bottom">
<span>#Python  </span>
<span>#Java</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">标题</span>
<span class="date">2021/02/03</span>
</div>
<div class="article-body">
<p>文章内容</p>
</div>
<hr>
<div class="article-bottom">
<span>#Python  </span>
<span>#Java</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">标题</span>
<span class="date">2021/02/03</span>
</div>
<div class="article-body">
<p>文章内容</p>
</div>
<hr>
<div class="article-bottom">
<span>#Python  </span>
<span>#Java</span>
</div>
</div>
</div>
</body>
</html>
CSS
/*博客CSS文件*/
/*通用样式*/
body {
margin: 0;
background-color: wheat;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
padding-left: 0;
}
.blog-picture {
height: 100px;
width: 100px;
border-radius: 50%;
border: solid 5px white;
margin: 20px auto;
overflow: hidden;
}
.blog-picture img {
max-width: 100%;
}
.blog-title, .blog-info {
color: darkgray;
font-size: 18px;
text-align: center;
}
.blog-link, .blog-class {
font-size: 24px;
}
.blog-link a, .blog-class a {
color: darkgray;
}
.blog-link a:hover, .blog-class a:hover {
color: white;
}
.blog-link, .blog-class {
text-align: center;
margin-top: 90px;
}
/*左侧样式*/
.blog-left {
position: fixed;
height: 100%;
width: 20%;
background-color: #4e4e4e;
float: left;
}
/*右侧样式*/
.blog-right {
float: right;
width: 80%;
height: 1000px;
}
.article {
background-color: white;
margin: 10px 20px 10px 10px;
/*边框阴影*/
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
.title {
font-size: 36px;
}
.date {
float: right;
margin: 10px 10px;
font-weight: bold;
}
.article-title {
border-left: 5px solid aquamarine;
text-indent: 1em;
}
.article-body {
font-size: 18px;
text-indent: 30px;
/*border-bottom: 1px solid black;*/
}
.article-bottom {
padding-left: 20px;
padding-bottom: 10px;
}
扫一扫
1019
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
