css
2020-10-17 本文已影响0人
ttiga
1.什么是CSS
1.1、什么是CSS
Cascading Style Sheet层叠级联样式表
CSS ：表现 (美化网页)
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动......
1.2、发展史
CSS1.0
CSS2.0 浮动，定位
CSS3.0 圆角，阴影，动画...... 浏览器兼容性
1.3、快速入门
style 基本入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 规范，<style> 可以编写css的代码 h1是一个选择器
语法 ：
选择器{
声明1;
声明2
声明3;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
css的优势：
1.内容和表现分离
2.网页结构表现统一，可以实现复用
3.样式十分的丰富
4.建议使用独立于html的css文件
5.利用SEO，容易被搜索引擎收录！
1.4、CSS的3种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部样式 -->
<link rel="stylesheet" href="css/style.css">
<!-- 内部样式 -->
<style>
h1{
color: green;
}
</style>
</head>
<body>
<!-- 优先级 ：就近原则（看谁更靠近标签<h1> -->
<!-- 行内样式 ：在标签元素中，编写一个style属性，编写样式即可 -->
<h1>我是标题</h1>
</body>
</html>
拓展 ：外部样式两种写法
-
链接式 ：
<link> 是html标签，只能用于HTML代码中
<!-- 外部样式 --> <link rel="stylesheet" href="css/style.css"> -
导入式 :
@import 是CSS2.1特有的
<!-- 导入方式，css2.1的方法 --> <style> @import url("css/style.css"); </style>2.选择器
作用 ：选择页面上的某一个或者某一类元素
2.1、基本选择器
1、标签选择器 ：选择一类标签 格式 ：标签名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*标签选择器，会选择到页面上所有的这个标签*/ h1{ color: salmon; background: seagreen; /* 圆角效果*/ border-radius: 10px; } p{ font-size: 50px; } </style> </head> <body> <h1>学HTML</h1> <h1>听我的</h1> <p>这是一个分段</p> </body> </html>2、类选择器 class 选择所有class属性一致的标签，跨标签 格式 ：.类名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*类选择器的格式 .class的名称{} 好处，可以多个标签归类，可以跨标签实现，是同一个class，可以重复使用 */ .dijia{ color: seagreen; } .chaoren{ color: steelblue; } </style> </head> <body> <h1 class="dijia">标题1</h1> <h1 class="chaoren">标题2</h1> <h1 class="dijia">标题3</h1> <p class="chaoren">p标签</p> </body> </html>3、id选择器 ：全局唯一！格式 ：#id名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*id选择器的格式 ：#id名称{} id必须保证全局唯一！ 选择器优先级 ： 不遵循就近原则，固定的 id选择器> class选择器> 标签选择器 */ #dijia{ color: steelblue; } .style1{ color: tomato; } h1{ color: turquoise; } </style> </head> <body> <h1 id="dijia">标题1</h1> <h1 class="style1">标题2</h1> <h1 class="style1">标题3</h1> <h1>标题4</h1> <h1>标题5</h1> </body> </html>优先级 ：id > class > 标签
2.2、层次选择器(不改变自身样式)
1、后代选择器 ：在某个元素的后面 祖爷爷 爷爷 爸爸 你
/*后代选择器*/ body p{ background: red; }2、子选择器 一代 ，儿子
/*子选择器*/ body>p{ background-color: violet; }3、相邻兄弟选择器 同辈
/*弟弟选择器 ：只有一个，相邻（向下）*/ .active + p{ background: yellow; }4、通用选择器
/*相邻兄弟选择器 相对位置同级选择器 所有弟弟选择器 当前选中元素的向下的所有兄弟元素*/ .active~p{ background-color: turquoise; }
2.3、伪类结构选择器
跟结构相关，定位元素的
伪类 ：条件
/* 避免使用class，id选择器 */
<style>
/* ul的第一个子元素 */
ul li:first-child{
background: springgreen;
}
/* ul的最后一个子元素 */
ul li:last-child{
background-color: tomato;
}
</style>
<style>
/* 选中p1 ：定位到父元素（body），选择当前的第一个元素
选择当前p元素的父级元素（body），选中父级元素的要是p元素才能生效！受其他元素影响
*/
p:nth-child(2){
background-color: yellow;
}
/*选中父元素，下的p元素的第二个，类型 不受其他元素影响 */
p:nth-of-type(2){
background-color: rgba(62, 22, 206, 0.24);
}
</style>
2.4、属性选择器(常用)
id + class 结合~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.demo a {
float: left; /*浮动，飘起来，变成球*/
display: block; /*块元素*/
height: 50px;
width: 50px;
border-radius: 10px; /*圆角边框*/
background: skyblue;
text-align: center; /* 文本对齐方式*/
color: pink; /*字体颜色*/
text-decoration: none; /*去下划线*/
margin-right: 5px; /*外边距，边框*/
/* line-height: 45px;/*行高*/
font: bold 20px/50px Arial; /* 文本粗体居中*/
/* line-height: 50px; 行高 */
}
/* 标签值[属性名=属性值（正则）]
= 绝对等于
*=包含这个标签的元素
^=以这个标签开头的元素
$=以这个标签结尾的元素
*/
/* 存在id属性的元素 a[]{}*/
/* a[id]{
background:yellow;
} */
/* 标签名[属性名=属性值]{} */
/* id=first的元素 */
/* a[id=first]{
background: yellow;
} */
/* class 中有links的元素 */
/* a[class*="links"]{
background: yellowgreen;
} */
/* 选中href中以http开头的元素 */
/* a[href^=http]{
background: tomato;
} */
/* 选中href结尾的元素 */
a[href$=pdf]{
background: violet;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://baidu.com" class="links item first" id="first">1</a>
<a href="https://bilibili.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.1span标签 ：重点要突出的字，使用span套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--
font-family ：字体样式
font-size ：字体大小
font-weight ：字体粗细 等价于<stronger>标签
color :字体颜色
-->
<style>
body{
font-family: "Arial Black",宋体;
color: coral;
}
h1{
font-size: 50px ;
/* 50em em表示一个缩进，一个缩进占位两个字体 */
}
.p1{
font-weight: bolder;
}
/* 字体风格
oblique ：斜体
*/
/* p{
font:oblique bolder 12px "楷体";
} */
</style>
<body>
<h1>故事介绍</h1>
<p class="p1">
平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
<p>
Since there’s no help, come let us kiss and part;Nay, I have done, you get no more of me,And I am glad, yea glad with all my heartThat thus so cleanly I myself can free;Shake hands forever, cancel all our vows,And when we meet at any time again,Be it not seen in either of our browsThat we one jot of former love retain.Now at the last gasp of Love’s latest breath,When, his pulse failing, Passion speechless lies,When Faith is kneeling by his bed of death,And Innocence is closing up his eyes,Now if thou wouldst, when all have given him over,From death to life thou mightst him yet recover.
</p>
</body>
</html>
3.3、文本样式
1.颜色 color rgb rgba
2.文本对齐的方式 text
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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--
颜色 ：单词
RGB(red green blue) 0~F
RGBA A: 0~1
text-align: 排版 居中，居左，居右
text-indent : em; 段落首行缩进
行高，和 块的高度一致，就可以上下居中
-->
<style>
h1{
color: crimson;
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: blueviolet;
height: 300px; /* 高度 */
line-height: 300px; /*行高*/
}
/* 下划线 */
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration:line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
/* 超链接去下划线 */
a{
text-decoration: none;
}
/* <!--
水平对齐 需要参照物，物体a，b
--> */
img,span{
width: 500px;
height: 500px;
vertical-align: middle;
}
</style>
<body>
<a href="">1234</a>
<p class="l1">1233123</p>
<p class="l2">1231233</p>
<p class="l3">1231233</p>
<h1>故事介绍</h1>
<p class="p1">
平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
<p class="p3">
Since there’s no help, come let us kiss and part;Nay, I have done, you get no more of me,And I am glad, yea glad with all my heartThat thus so cleanly I myself can free;Shake hands forever, cancel all our vows,And when we meet at any time again,Be it not seen in either of our browsThat we one jot of former love retain.Now at the last gasp of Love’s latest breath,When, his pulse failing, Passion speechless lies,When Faith is kneeling by his bed of death,And Innocence is closing up his eyes,Now if thou wouldst, when all have given him over,From death to life thou mightst him yet recover.
</p>
<br/>
<br/>
<p>
<img src="images/微信截图_20201024205056.png" alt="">
<span>欢迎注册QQ</span>
</p>
</body>
</html>
3.4、阴影
/*text-shadow ：阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
text-shadow: skyblue 10px -10px 1px;
}
3.5、超链接伪类
/* 默认的颜色 */
a{
text-decoration: none;
color: black;
}
/*(重点)鼠标悬浮的颜色*/
a:hover{
color: coral;
font-size: 20px;
}
3.6、列表
#nav{
width: 50px;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red;
}
/*ul li*/
/*
list-style：
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
background: rgb(116, 110, 110);
}
ul li{
height: 30px;
list-style-type: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
3.7、背景
背景颜色
背景图片
<style>
.div{
width: 1000px;
height: 700px;
border: 1px solid red
background-image:url("images/b.png");
/*默认是全部平铺的 repeat*/
}
.div1{
background-repeat: repeat-x;
/*水平平铺*/
}
.div2{
background-repeat: repeat-y;
/*垂直平铺*/
}
.div3{
background-repeat: no-repeat;
/*不平铺*/
}
</style>
image.png
3.8、渐变
<!-- 径向渐变，圆形渐变 -->
<style>
body{
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
</style>
