css1--待整理
2.css的三种引入方式
引入方式有三种：
- 内联样式
- 行内样式表
- 外部样式表
- 链接式
- 导入式
示例学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的引入方式</title>
<!--
内链式-->
<style type="text/css">
h1{
font-size: 30px;
color: red;
}
/*导入的方式
不推荐使用！！*/
@import url('./css/index.css');
</style>
<!--
外链式
stylesheet使做外部样式表 text/css是文件类型 href里面为文件路径-->
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<!--
内嵌式,级别高于内链式，但是尽量不用，不好维护-->
<div>
<h1 style="font-size: 10px;color: yellow;">路飞学城</h1>
</div>
<div>
<h2>路飞学城</h2>
</div>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~
./css/index.css 文件内容
h2{
color: #A30099;
font-size: 50px;
}
~~~~~~~~~~~~~~~~~~~~~~~
链接式与导入式的区别
1、标签属于XHTML,@import是属性css2.1
2、使用链接的css文件先加载到网页当中，再进行编译显示
3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
3.基础选择器
在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围。
基础选择器包括
- 标签选择器
- 类选择器
- ID选择器
- 通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<!--内链-->
<style type="text/css">
/*
通配符选择器,*匹配所有的元素标签
padding 离左边的距离(后面会介绍)
margin 离上面的距离(后面会介绍)
*/
*{
padding: 0;
margin: 0;
color: rgba(215,238,252,0.87);
}
/*
id选择器,用法 #id名
如果不指定高度，会把子内容填充
margin: 0 auto 居中显示
*/
#container{
width: 968px;
background-color: rgba(172,179,162,0.87);
margin: 0 auto;
}
/*标签选择器，color可以通过IDE的功能选择*/
h1{
color: rgba(252,136,24,0.87);
}
/*
类选择器 用法 .类名
*/
.content{
width: 968px;
background-color: rgba(179,14,141,0.87);
}
img{
width: 968px;
}
/*(高级)子代选择器，从div的直接子元素中找到该标签，
通过>连接在一起，仅仅作用于这一个类型的所有子元素，对父类和其他类型的无影响
*/
ul>li{
color: rgba(179,94,46,0.87);
}
/*(高级)后代选择器,从所有后代中找到p标签?????后代与儿子的区别是啥？
外层的选择器写在前面，内层的选择器写在后面，之间用空格分割，标签嵌套
时，内层的标签成为外层标签的后代*/
ul a{
color: yellow;
}
</style>
</head>
<body>
<!--
上中下布局 1+1+1布局-->
<div id="container">
<div class="header">
<h1>路飞学城</h1>
</div>
<div class="content">
<h3>我是内容</h3>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524897189014&di=42e2c599b3e30d3c31bfa86df7d0a0a4&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F4a36acaf2edda3cc32bdad060be93901213f92be.jpg" alt="">
</div>
<div class="header">
<ul>
<li>1 <a href="">哈哈</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
3.高级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级选择器</title>
<style type="text/css">
/*群组选择器,通过逗号连接,同时声明对多个风格相同的样式
border 边界 solid 实线
*/
.title,.content,.footer{
width: 968px;
/*height: 300px;*/
margin: 0 auto;
background-color: rgba(92,81,52,0.55);
border: 1px solid red;
}
/*嵌套选择器*/
.c1 p {
color: red;
}
/*交集选择器,由两个选择器连接构成，选中二者范围的交集，
两个选择器之间不能有空格，第一个选择器必须是标签选择器，
第二个必须是类选择器或者id选择器,用于选定指标签指定属性的标签
class用 .
id用#
例如，只让含有p的p1类改颜色*/
p.p1{
color: rgba(255,252,36,0.71);
}
p#title1{
font-size: 30px;
}
/*毗邻选择器,a+b
紧跟着a这个标签后面的第一个b标签*/
h3+p{
color: rgba(255,97,207,0.71);
}
/*兄弟选择器a~b，找到所有a标签后面同级的b标签
*/
h3~p{
color: rgba(26,30,255,0.71);
}
/*属性选择器
找到所有class=百度的选择器*/
[class='baidu']{
color: rgba(68,255,155,0.71);
}
/*title的选择器*/
[title]{
color:red;
}
/*找到所有title属性中包含（字符串包含）hello的元素：*/
[title*="hello"] {
color: red;
}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素*/
[title~="hello"] {
color: red;
}
/*找到所有class开头是btn的选择器*/
[class^='btn']{
font-size: 20px;
color: rgba(179,0,255,0.71);
}
/*找到所有class结尾是xia的选择器*/
[class$='xia']{
font-size: 30px;
color: rgba(255,15,41,0.71);
}
/*表单常用*/
input[type="text"] {
backgroundcolor: red;
}
/*总结
基础选择器
1.标签选择器 div
2.类选择器 .div1
3.id选择器 #box
4.通配符选择器 *
高级选择器
1.群组选择器 中间是用逗号,
2.交集选择器 选择器之间不能有空格
第一个标签必须是标签选择器，第二个标签可以是id选择器或者类选择器
3.后代选择器 选择器之间用空格
4.子代选择器 >
5. 毗邻选择器 +
6. 兄弟选择器 ~
7. 属性选择器 [属性="值"] 例如[class="title1"]
[class^="开头"] [class$="结尾"]
*/
</style>
</head>
<body>
<div class="title">
<p class="p1" id="title1">我是一个标题</p>
</div>
<div class="content">
<h3>我是3级标题</h3>
<a href="">百度一下</a>
<p>我是另一个段落</p>
<h3>我是3级标题</h3>
<p>我是另一个段落</p>
<h3>我是3级标题</h3>
<p>我是另一个段落</p>
<p>我是另一个段落</p>
<p>我是另一个段落</p>
</div>
<div class="footer">
<a href="" class="baidu">百度</a>
<a href="" class="baiduyixia">百度一下</a>
<a href="" class="btn-default">百度一下</a>
</div>
</body>
</html>
4.选择器的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器优先级</title>
<style type="text/css">
#div1{
background-color: darkblue;
}
.box{
background-color: aqua;
}
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<!--
优先级
内嵌式>内链式>外链式
id选择器>类选择器>标签选择器
-->
<div id="div1" class="box">哈哈</div>
</body>
</html>
5.伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
/*未被访问时超链接的样式*/
a:link{
background-color:gray(1);
}
/*鼠标单击访问时超链接的样式
针对id为a1的标签*/
a:visited{
color: green;
}
/*鼠标悬停时候的状态*/
a:hover{
font-size: 20px;
color: aqua;
}
/*单击超链接时的状态*/
a:active{
color: #A30099;
}
/*
总结
爱恨情仇原则love/hate
l v /h a
*/
/*获取焦点的时候的样式*/
input:focus{
background-color: rgba(140,101,81,0.96);
}
/*伪元素选择器*/
p:first-letter{
font-size: 30px;
}
p:before{
content:"哈哈";
color: rgba(28,140,130,0.96);
}
p:after{
content: "$";
color: rgba(140,34,27,0.96);
}
</style>
</head>
<body>
<ul>
<li><a href="#" id="a1">百度一下</a></li>
<li><a href="#" id="a2">how123</a></li>
<li><a href="#" id="a3">博客</a></li>
</ul>
<form>
<input type="text">
</form>
<p>来呀！快活啊</p>
</body>
</html>
6.文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<!--内链式引入-->
<style type="text/css">
p{
/*设置字体大小*/
font-size: 30px;
/*推荐设置斜体的时候使用oblique
其他斜体还有：italic normal*/
font-style: oblique;
/*设置字体的粗细,有一下的值
normal 默认值，标准粗细
bord 粗体
border 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值*/
font-weight: bold;
/*字体类型，中文必须加引号
一个单词可以不加引号
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。
浏览器会使用它可识别的第一个值。如果设置成inherit，则表示继承父元素的字体。*/
font-family: "微软雅黑";
/*字体颜色
支持三种颜色值：十六进制值 如: ＃FF0000
一个RGB值 如: RGB(255,0,0)
颜色的名称 如: red*/
color: forestgreen;
}
</style>
</head>
<body>
<!--默认字体大小是16px=1em,0.75em=12px-->
<p>《复仇者联盟3：无限战争》是由安东尼·罗素、乔·罗素执导，小罗伯特·唐尼、克里斯·埃文斯、克里斯·海姆斯沃斯、斯嘉丽·约翰逊、马克·鲁法洛、乔什·布洛林等主演的科幻片，是复仇者联盟系列电影的第三部，是漫威电影宇宙的第十九部电影，该片将与《雷神3：诸神黄昏》剧情连接，该片将于2018年4月27日在美国上映，2018年5月11日在中国大陆上映。
该片讲述复仇者联盟和他们的超级英雄盟友们必须愿意牺牲一切，才能在灭霸毁灭宇宙之前将其击败。</p>
</body>
</html>
7.文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
.box1{
width:500px;
height: 200px;
background-color: rgba(140,99,28,0.39);
color: darkgreen;
/*文字装饰
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。*/
text-decoration: overline;
/*鼠标显示方式
default 默认光标
pointer超链接的指针
wait等待的效果
help指示可用的帮助
text指示文本
crosshair鼠标呈现十字状 */
cursor:pointer;
/*设置首行缩进*/
text-indent: 20px;
/*文本水平对齐
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐 */
text-align: center;
/*设置阴影，课多选
可以写三个长度值，第一个为设置对象的阴影水平偏移值，可为负值
第二个为垂直对象偏移值，可为负值，第三个值不能为负值，表示阴影模糊值
同时可以写一个颜色值，表示阴影的颜色*/
text-shadow: 0px 0px 3px #fff;
/*行高
当行高等于盒字的高度时，会实现文本垂直方向居中*/
line-height: 200px;
font-size: 30px;
font-weight: 900;
}
/*小练习*/
#div2{
width: 400px;
height: 300px;
background-color: #b3d4fc;
cursor: col-resize;
font-size: 40px;
font-style: revert;
font-family: 微软雅黑;
text-align: center;
line-height: 300px;
text-shadow: 1px 1px 1px #ffffff;
}
</style>
</head>
<body>
<div class="box1">背景颜色是啥？</div>
<a href="">天空飘过五个字</a>
<div id="div2">总有***民想害朕</div>
</body>
</html>
8.背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style type="text/css">
#img{
width: 1000px;
height:1000px;
background-color: yellowgreen;
/*设置背景图像*/
/*background-image: url(http://nenmbi.fyboke.com/up/nenmb/img/170705/170705232726595d055ee5571/595d0562aec8e.jpg);*/
/*背景图片是否填充*/
/*background-repeat: no-repeat;*/
/*位置设定*/
/*background-position: -200px 10px;*/
/*简写的方式，官方推荐*/
background:url(http://nenmbi.fyboke.com/595d0562aede6.jpg) no-repeat -200px 20px;
常用背景相关属性总结：
background-color 规定要使用的背景颜色。
background-image 规定要使用的背景图像。
background-size 规定背景图片的尺寸。
background-repeat 规定如何重复背景图像。
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-position 规定背景图像的位置。
inherit 规定应该从父元素继承background属性的设置。
background-repeat取值范围：
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承background-repeat属性的设置。
background-attachment取值范围：
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
inherit 规定应该从父元素继承background-attachment属性的设置。
background-position取值范围(三种方式)：
描述型
top left 、top center 、top right 、center left 、center center 、center right 、bottom left 、bottom center 、bottom right
如果只设置了一个关键词，那么第二个值就是"center"。默认值：0% 0%。
百分制
x% y% 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果只设置了一个值，另一个值就是50%。
像素
xpos ypos 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果只设置了一个值，另一个值就是50%。可以混合使用%和position值。
示例：
body {
background-color: red;
backgraound-image: url(xx.png);
background-size: 300px 300px;
background-repeat: no-repeat;
background-position: center
}
简写：官方推荐
body {
background: red url(xx.png) no-repeat fixed center/300px 300px;
}
}
</style>
</head>
<body>
<div id="img"></div>
</body>
</html>
