一、CSS不同描述(层叠 样式 表)
1、直接写在标签里面 style = “样式1;样式2”
2、在head中通过style标签定义
3、把样式单独写在CSS文件中,然后在html文件中通过link标签导入
二、CSS语法:
例:
h1 {color:red; font-size:14px;}
三、CSS查找标签的方式(选择器)
1、基本选择器
- 标签选择器
- id选择器
- 类选择器
2、通用选择器
-样式文件优先级
- 内联样式(直接在标签里写style)优先级最高
- 选择器都一样的情况下,谁靠近标签谁就生效
四、属性
padding
:内容区和边框之间的距离(内填充/内边距)margin
:边框之外的距离(多用来调整标签和标签之间的距离)
五、浮动:
-----div配合float来做页面布局
六、定位:
- 默认的
static
- 相对定位
relative
(相对于原来的位置来说) - 绝对定位
absolute
(相对于最近的一个被定位过的父标签) - 固定在某个位置(fixed)
dummyimage.com(图片制作网页)
七、选择方式和几个基本设置
/*注释*/
/*全局通用的样式*/
*{
font-family:".PingFang SC","微软雅黑","Microsoft","Arial";
font-size:14px;
}
/*字体粗细*/
.c4{
font-weight:100
}
.c5{
font-weight:900;
/*color*/
/*color:rgb(255,0,0);*//*红 绿 蓝*/
color:rgba(255,0,0,0.5);/*红 绿 蓝(0~1之间调节浅深)*/
}
/*color:#FF0000;*/
/*对齐方式*/
.c3{
text-align:center;/*居中*/
text-align:right;/*居中*/
text-align:justify;/*两端对齐*/
text-intent:28px;/*首行缩进*/
}
/*去掉a标签下面的下滑线*/
a{
text-decoration:none;
}
/*导航条的样式*/
/*商品列表的样式*/
/*标签选择器*/
h1{
color:red;font-size:48px
}
/*id选择器*/
#p2{
color:black;font-size:48px
}
/*类选择器*/
.c1{
color:yellow;font-size:48px
}
/*强制生效(不推荐使用)*/
.c1{
color:deeppink;font-size:48px!import
}
八、外边框与属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style>
/*全局样式*/
*{
margin:0;
padding:0;
}
/*加边框*/
.c1{
background-color:red;
height:100px;
width:100px;
border:10px solid green; /*10px宽 直线 绿色的框*/
}
/*display属性*/
.c2{
background-color:red;
display:inline; /*行内标签*/
}
.c3{
background-color:green;
display:block;/*块级标签*/
}
ul{
list-style-type:none;
}
li{
display:inline;
padding:20px
<!--border-right:1px solid #666666;-->
}
li.last{
border-right:none;
}
li>a{
border-right:1px solid red;
padding-right:15px;
<!--简写-->
padding:15px 20px 20px 15px;
}
<!--CSS盒子模型-->
.c5{
height:100px;
width:100px;
border:5px solid green;
<!--外边距-->
margin-top:15px;
margin-right:20px;
margin-bottom:20px;
margin-left:15px;
<!--简写-->
margin:15px 20px 20px 15px;<!--上右下左-->
margin:15px 20px;<!--上下,左右-->
<!--居中-->
margin:0 auto;
}
/*float*/
.c6{
width:20%;
height:100px;
background-color:green;
float:left;
}
.c7{
width:80%;
height:100px;
background-color:red;
float:left;
clear:left;/*清除浮动*/
}
/*overflow*/
.c8{
width:70px;
height:70px;
border:1px solid black;
overflow:auto;
}
.header-img{
width:120px;
height:120px;
border:2px solid red;
border-radius:100%;
}
img {
max-width:100%;
overflow:hidden;
}
#d1{
border:1px solid red;
}
.c9{
width:50px;
height:50px;
background-color:red;
border:1px solid black;
float:left;
}
/*清除浮动 一个类*/
.clear-fix:after{
content:"";
clear:both;
display:block;
}
/*定位*/
.c10,
.c11,
.c12{
width:100px;
height:100px;
}
.c10{
background-color:red;
}
.c11{
background-color:blue;
position:relative;/*relative:相对定位 absolute*/
left:100px;
top:100px;
}
.c12{
background-color:green;
}
.13{
position:fixed;/*固定*/
right:20px;
bottom:20px;
background-color:grey;
}
</style>
</head>
<body>
<div class="c1">c1</div>
<div class="c2">嘿嘿</div>
<span class="c3">嘻嘻</span>
<span class="c4">啊哈</span>
<div class="c5">嘿嘿</div>
<ul>
<li><a href="">就将计就计</a></li>
<li><a href="">坎坎坷坷</a></li>
<li class="last"><a href="">噢噢噢噢</a></li>
</ul>
<div class="c6">c6</div>
<div class="c7">c7</div>
<div class="c8">
李优秀, 李优秀,
李优秀, 李优秀,
李优秀, 李优秀,
李优秀, 李优秀,
李优秀, 李优秀,
c8</div>
<div class="header-img">
<img src="D:\Python\python_txt\old_boy\未命名图片.png" alt="">
</div>
<div id="d1" class="clear-fix">
<div class="c9">c9</div>
<div class="c9">c9</div>
<div class="c9">c9</div>
<div class="c9">c9</div>
<div class="c9">c9</div>
</div>
<div class="c10">c10</div>
<div class="c11">c11</div>
<div class="c12">c12</div>
<div class="c13">返回顶部</div>
</body>
</html>
九、背景不动示例
HTML:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景不动效果</title>
<style>
.c1{
height:300px;
background:red;
}
.c2{
height:500px;
<!--background-image:url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1386406210,2948783140&fm=26&gp=0.jpg");-->
<!--background-repeat:no-repeat;-->
<!--background-position:center;-->
background-attachment:fixed;
background:url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1386406210,2948783140&fm=26&gp=0.jpg"
) no-repeat center;
}
.c3{
height:300px;
background:green;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
十、blog页面示例:
HTML:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Blog页面示例</title>
<link rel="stylesheet" href="blog示例.css">
</head>
<body>
<!--左侧边栏开始-->
<div class="left">
<!--头像开始-->
<div class="header-img">
<img src="小新.png" alt="">
</div>
<!--头像结束-->
<div class="blog-name">小小龙的家</div>
<div class="blog-info">它挣扎着最终得到一片光明!</div>
<!--连接区开始-->
<div class="blog-links">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">关于你</a></li>
<li><a href="">关于它</a></li>
</ul>
</div>
<!--连接区结束-->
<!--文章分类开始-->
<div class="blog-tags">
<ul>
<li><a href="">JS</a></li>
<li><a href="">CSS</a></li>
<li><a href="">HTML</a></li>
</ul>
</div>
<!--文章分类结束-->
</div>
<!--左侧边栏结束-->
<!--右侧边栏开始-->
<div class="right">
<div class="article-list">
<div class="article">
<div class="article-title">
<h1 class="article-name">酷酷的滕</h1>
<span class="article-data">2018-03-07</span>
</div>
<div class="article-info">
我爱你
为了找你
我搬进了鸟的眼睛里
我注视着风的方向
却忘记了猎人的枪响
</div>
<div class="article-tag">
#语录
</div>
</div>
<div class="article">
<div class="article-title">
<h1 class="article-name">酷酷的滕</h1>
<span class="article-data">2018-03-07</span>
</div>
<div class="article-info">
我爱你
好想学一种
可以伴你一生的咒语
哪怕是
做你的宠物狗也可以
</div>
<div class="article-tag">
#语录
</div>
</div>
<div class="article">
<div class="article-title">
<h1 class="article-name">酷酷的滕</h1>
<span class="article-data">2018-03-07</span>
</div>
<div class="article-info">
我爱你
如果我一生只能给你拥抱
和不放开你的手
你是否可以跟我走
</div>
<div class="article-tag">
#语录
</div>
</div>
<div class="article">
<div class="article-title">
<h1 class="article-name">酷酷的滕</h1>
<span class="article-data">2018-03-07</span>
</div>
<div class="article-info">
我爱你凉爽的夏夜。窗户开敞,灯亮着。水果在碗中。你的头在我的肩上。一天中这些最愉悦的时刻。
</div>
<div class="article-tag">
#语录
</div>
</div>
<div class="article">
<div class="article-title">
<h1 class="article-name">酷酷的滕</h1>
<span class="article-data">2018-03-07</span>
</div>
<div class="article-info">
我爱你。 你给我每一次都是新鲜,我对你的依恋越加明显。就在我们每次亲吻的瞬间,我就再也无法离开你的身边
</div>
<div class="article-tag">
#语录
</div>
</div>
</div>
</div>
<!--左侧边栏结束-->
</body>
</html>
CSS:
/*blog页面相关样式*/
/*公用样式*/
*{
font-family:".PingFang SC","Microsoft YaHei";
font-size:14px;
margin:0;
padding:0;
}
/*去掉a标签的下划线*/
/*左边栏样式*/
.left{
width:20%;
height:100%;
background-color:rgb(76,77,76);
position:fixed;/*位置固定*/
left:0;
top:0
}
/*左边栏头像样式*/
.header-img{
height:128px;
width:128px;
border:5px solid white;
border-radius:50%;/*圆形框*/
overflow:hidden;/*溢出隐藏*/
margin:0 auto;/*自动居中*/
margin-top:20px;/*向下移20px*/
}
.header-img>img{
max-width:100%;/*让照片最大为header-img框的大小*/
}
/*blog名称*/
.blog-name{
color:white;
font-size:24px;
font-weight:bold;/*字体加粗*/
text-align:center;/*文字居中*/
margin-top:15px;
}
/*blog介绍*/
.blog-info{
color:white;
font-size:12px;
text-align:center;/*文字居中*/
/*text-decoration:underline;/*下加下划线*/
border-bottom:1px solid #332;/*灰色1px下直线框*/
margin:5px 15px;/*上下5px左右15px*/
}
/*连接组和分类组*/
.blog-links,
.blog-tags{
text-align:center;/*文字居中*/
color:white;
margin-top:40px;
}
.blog-links a{
text-decoration:none;
color:yellow;
}
.blog-tags a{
text-decoration:none;
color:#4DFFFF;/*文字颜色为浅蓝色*/
}
/*右边栏样式*/
.right{
width:80%;
background-color:rgb(238,237,237);
height:790px;
float:right;/*让右边栏向右浮动*/
}
.article-list{
margin-right:10%;
margin-left:30px;
margin-top:30px;
}
.article{
background-color:white;
margin-top:15px;
}
.article-name{
display:inline-block;
}
.article-title{
padding:15px;
border-left:3px solid red;
}
.article-info{
padding:15px;
}
.article-tag{
padding:15px 0;
margin:15px;
border-top:1px solid #eeeeeeee;
}
/*文章发布时间*/
.article-data{
float:right;
}
页面效果:
十一、CSS练习引入示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS练习引入示例</title>
<link rel="stylesheet" href="index.css">
<style>
<!--连接未被点击过-->
a:link{
color:pink;
}
<!--访问过的网站-->
a:visited{
color:green;
}
<!--鼠标移上去-->
a:hover{
color:blueviolet;
}
<!--连接被点击后的颜色-->
a:active{
color:black;
}
#d1{
color:red;
}
#d1:hover{
color:blue;
}
input:focus{
<!--外边的边框-->
outline:0;
<!--内部填充颜色-->
background-color:green;
}
<!--设置文章第一个字色颜色大小-->
p:first-letter{
font-size:48px;
color:red;
}
<!--在前面添加文字-->
.c2:before{
content:"*";
color:red;
}
<!--在后面添加文字-->
.c2:after{
content:"[?]";
color:blue;
}
.c6{
background-color:yellow;
}
.c7{
width:600px;
height:600px;
background-image:url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1386406210,2948783140&fm=26&gp=0.jpg");
<!--不重复-->
background-repeat:no-repeat;
<!--background-repeat:repeat-x;-->
<!--background-repeat:repeat-y;-->
<!--背景位置-->
background-position:center;
<!--background-position:%50 %50;-->
<!--background-position:200px 200px;-->
<!--简写-->
<!--background:url(-->
<!--"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1386406210,2948783140&fm=26&gp=0.jpg"-->
<!--) no-repeat %50 %50;-->
}
</style>
</head>
<body>
<p id="p2">小小龙</p>
<!---->
<p class="c1">小龙龙</p>
<h1>小小飞</h1>
<!--伪类选择器-->
<a href="http://www.sogo.com">搜狗</a>
<a href="http://www.baidu.com">百度</a>
<div id="d1">啥是佩奇</div>
<input type="text">
<!--伪元素选择器-->
<p>
你好鸭!好鸭!
你好鸭!好鸭!
你好鸭!好鸭!
</p>
<p class="c2">你好鸭!</p>
<p class="c2">你好鸭!</p>
<p class="c2">你好鸭!</p>
<!--字体属性设置-->
<h1>嘿嘿!</h1>
<p>嘻嘻嘻!</p>
<p class="c3">默认</p>
<p class="c4">100</p>
<p class="c5">900</p>
<div class="c6">我是div</div>
<div class="c7"></div>
<div class="c8"></div>
</body>
</html>
十二、总结:
一、伪类和伪元素
1.伪类
link
(指向未被访问页面的链接样式)visited
(指向已被访问页面的链接样式)hover
(重要 用于所有元,素不只是链接 ,用于鼠标指针浮动在上面的元素)active
(用于活动链接)focus
(input标签获取光标焦点)
2.伪元素
first-letter
before
(重要 在内部前面添加)after
(重要 在内部后面添加)
二、CSS属性
1.字体
font-family
(字型)font-size
(字体大小)font-weight
(字体宽度)
2.文本属性
-
text-align
(对齐) -
text-decoration
(装饰 去掉a标签的下滑线) -
text-intent
(首行缩进)
3.背景属性 -
background-color
背景颜色 -
background-image
背景图片 url() no-repeat 50% 50%
4.color
-
red
(直接写颜色) -
#FF0000
-
rgb(255,0,0)
—>rgba(255,0,0,0.5)
5.边框属性 border
border-width
(边框宽度)border-style
(边框样式)border-color
(边框颜色)
简写:border: 1px solid red
6.CSS盒子模型
-
content
(内容) -
padding
(内填充) 调整内容和边框之间距离 -
border
(边框) -
margin
(外边距) 多用于调整标签之间距离(注意两个按着的标签margin取最大值)注意:要习惯看浏览器窗口盒子模型
7.display
(标签的展现形式)
inline
(行内标签)block
(块形标签 菜单里的a标签可以设置)none
(不显示,不占位)inline-block
((1),(2)两种属性都有)
8.float
(浮动)
-
多用于实现布局效果
----(1):顶部的导航条
----(2):页面左右分栏(博客页面:左边20%,右边80%) -
float
----(1)任何标签都可以浮动,浮动之后都会变成块级 a标签float之后就可以设置高宽 -
float取值
----(1):left
----(2):right
----(3):none
9.clear 清除浮动–>清除浮动的副作用(内容飞出,夫标签撑不起来)
------:结合伪元素来实现.clearfix:after{ content:""; display:"block"; clear:both}
10.overflow
-
标签内容放不下(溢出)
-
取值
------hidden
:隐藏
------scroll
:出现滚动条
------auto
:
------scroll-x
------scroll-y
----------例子:原型头像例子overflow:hidden border-radius:50%(圆角)
11.定位position
static
默认relative
相对于原来位置absolute
相对于定位过的前辈标签fixed
固定 返回顶部按钮示例
脱离文档流:float,absolute,fixed
12.opacity(不透明度)
- 取值0~1
- 和rgb区别会改变文字和背景透明度
13.z-index
- 数值越大越靠近你
- 只能作用于定位过的元素
- 自定义的模态框
二、选择器
- 基本选择器
元素 ID 类 通用 - 组合选择器
后代 儿子 毗邻 弟弟 - 属性(input[type=“check”])
- 分组和嵌套
- 伪类和伪元素
选择器优先级
1、选择器相同:就近原则(越靠近标签优先级越高)
2、权重的计算(内联1000>ID100>类10>元素1)