1. 什么是CSS
1.1 什么是CSS
- Cascading Style Sheet 层叠样式表
- 是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力
- 美化网页
- 字体, 颜色, 边距, 高度, 宽度, 背景图片, 网页定位, 网页浮动…
1.2 发展史
CSS1.0
CSS2.0: DIV (块)+ CSS, HTML与CSS结构分离的思想, 网页变得简单, SEO
CSS2.1: 浮动, 定位
CSS3.0: 圆角, 阴影, 动画… 浏览器兼容性~
CSS优势
- 内容和表现分离
- 网页结构表现统一, 可以实现复用
- 样式十分的丰富
- 建议使用独立于html的css文件
- 利用SEO, 容易被搜索引擎收录
1.3 快速入门
style
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<style>
h1{
color: red;
}
style>
head>
<body>
<h1>我是一级标题h1>
body>
html>
建议使用HTML与CSS分离的写法
(1) 在html文件同级目录下新建一个css文件夹用来保存css文件, 在css文件夹下创建style.css文件
h1 {
color: red;
}
(2) 在html文件里通过link标签引入css文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<h1>我是一级标题h1>
body>
html>
1.4 css的三种导入方式
- 行内样式
- 内部样式
- 外部样式
- css三种导入方式的调用优先级: *就近原则
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<style>
h1{
color: blue;
}
style>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<h1>我是一级标题h1>
body>
html>
拓展: 外部样式两种写法
- 链接式
–
<link rel="stylesheet" href="css/style.css">
- 导入式
–
<style>
@import "css/style.css";
style>
- 两者的区别
- 区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
- 区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
- 区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
- 区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。
2. 选择器
- 作用: 选择页面上的某一个或者某一类元素
2.1 基本选择器
- 选择器调用优先级: id选择器 > class选择器 > 标签选择器
2.1.1 标签选择器
- 作用范围: 一类标签
- 格式: 标签{}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器title>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<h1>学Javah1>
<h1>学Javah1>
<h1>学Javah1>
<p>来B站p>
body>
html>
2.1.2 类选择器
- 作用范围: 所有和 class属性一致的标签, 跨标签
- 格式: .类名{}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器title>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<h1 class="dz1">学Javah1>
<h1 class="dz2">学Javah1>
<h1 class="dz1">学Javah1>
<p class="dz3">来B站p>
body>
html>
2.1.3 id选择器
- 作用范围: 全局唯一
- 格式: id名{}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Id选择器title>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<h1 id="title1">标题1h1>
<h1>标题2h1>
<h1>标题3h1>
<h1>标题4h1>
body>
html>
- style.css
h1{
color: blue;
background: burlywood;
border-radius: 24px;
}
p{
font-size: 30px;
color: red;
}
.dz1{
color: yellow;
background: burlywood;
border-radius: 24px;
}
.dz2{
color: red;
background: burlywood;
border-radius: 24px;
}
.dz3{
color: black;
background: burlywood;
border-radius: 24px;
}
#title1{
color: red;
}
2.2 层次选择器
2.2.1 后代选择器
- 作用于某个元素下的所有层级的子元素
body p{
background: blue;
}
2.2.2 子选择器
- 作用于某个元素下所有第一层级的子元素
body > p{
background: salmon;
}
2.2.3 相邻兄弟选择器
- 作用于某个元素下相邻的第一个同级元素
.beside + p{
background: green;
}
2.2.4 通用兄弟选择器
- 作用于某个元素下所有的同级元素
.beside ~ p{
background: black;
}
html文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器title>
<style>
body p{
background: blue;
}
body > p{
background: salmon;
}
.beside + p{
background: green;
}
.beside ~ p{
background: black;
}
style>
head>
<body>
<p>p0p>
<p class="beside">p1p>
<p>p2p>
<p>p3p>
<ul>
<li>
<p>p4p>
li>
<li>
<p>p5p>
li>
<li>
<p>p6p>
li>
ul>
<p>p7p>
<p>p8p>
body>
html>
2.3 结构伪类选则器
<body>
<h1>h1h1>
<p>p1p>
<h1>h1h1>
<p>p2p>
<p>p3p>
<ul>
<li>li1li>
<li>li2li>
<li>li3li>
ul>
<a href="">特效a>
body>
<style>
ul li:first-child{
background: red;
}
ul li:last-child{
background: blue;
}
p:nth-child(2){
background: green;
}
p:nth-of-type(2){
background: yellow;
}
a:hover{
background: red;
}
style>
2.4 属性选择器
id + class 结合
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器title>
<style>
.demo a{
float: left;
display: block;
width: 50px;
height: 50px;
border-radius: 10px;
background: blue;
text-align: center;
color: white;
text-decoration: none;
margin-right: 20px;
font: bold 20px/50px Arial;
}
a[href$=pdf]{
background: yellow;
}
style>
head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1a>
<a href="https://www.baidu.com" class="links item active" target="_blank" title="test">2a>
<a href="images/123.html" class="links item">3a>
<a href="images/123.png" class="links item">4a>
<a href="images/123.jpg" class="links item">5a>
<a href="abc" class="links item">6a>
<a href="/a.pdf" class="links item">7a>
<a href="/abc.pdf" class="links item">8a>
<a href="abc.doc" class="links item">9a>
<a href="abcd.doc" class="links item last">10a>
p>
body>
html>
折叠
= 绝对等于
*= 包含
^= 以...开头
$= 以...结尾
3. 美化网页元素
3.1 为什么要美化网页
- 有效的传递页面信息
- 页面漂亮才能吸引用户
- 凸显页面的主题
- 提高用户的体验
span标签: 重点要突出的字, 使用span套起来
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span标签title>
<style>
.title1{
color: red;
font-size: 50px;
}
style>
head>
<body>
欢迎学习<span class="title1">Javaspan>
body>
html>
3.2 字体样式
<style>
body{
font-family: 楷体;
color: red;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bolder;
}
style>
3.3 文本样式
- 颜色
- color rgb rgba
- 文本对齐的方式
- text-align = center; 居中显示
- 首行缩进
- text-indent: 2em;
- 行高
- line-height: 单行文字上下居中 line-height=height 行高=块高
- 装饰
- text-decoration
- 文本图片水平对齐
- vertical-align: middle;
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式title>
<style>
h1{
color: rgba(0,255,255,0.5);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3 {
background: #375dff;
height: 300px;
line-height: 300px;
}
.l1{
text-decoration: overline;
}
.l2{
text-decoration: line-through;
}
.l3{
text-decoration: underline;
}
a{
text-decoration: none;
}
img,span{
vertical-align: middle;
}
style>
head>
<body>
<a href="">123a>
<p class="l1">上划线p>
<p class="l2">中划线p>
<p class="l3">下划线p>
<h1>斗罗大陆h1>
<p class="p1">
《斗罗大陆》是唐家三少创作的穿越玄幻小说,2008年12月14日-2009年12月13日首发于起点中文网,2009年5月首次出版。
p>
<p class="p2">
《斗罗大陆》讲述的是穿越到斗罗大陆的唐三如何一步步修炼武魂,由人修炼为神,最终铲除了斗罗大陆上的邪恶力量,报了杀母之仇,成为斗罗大陆最强者的故事。主要角色有唐三、小舞、戴沐白等。
p>
<p class="p3">
2017年7月12日,《斗罗大陆》获得"2017猫片胡润原创文学IP价值榜"第二十二名。 2020年9月,2019中国网络文学排行榜揭晓,《斗罗大陆》入选IP影响排行榜。
p>
<p>
<img src="images/符号位.png" alt="">
<span>我要和图片水平对齐span>
p>
body>
html>
3.4 阴影
#price{
text-shadow: #375dff 10px 10px 2px;
}
3.5 超链接伪类
- 一般只用a:hover{}; 鼠标悬停时相应的变化
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
a{
text-decoration: none;
color: #000000;
}
a:hover{
color: orange;
font-size: 20px;
}
a:active{
color: green;
}
a:visited{
color: #d612be;
}
#price{
text-shadow: #375dff 10px 10px 2px;
}
style>
head>
<body>
<a href="#">
<img src="images/009.png" alt="">
a>
<p>
<a href="#">码出高效a>
p>
<p>
<a href="#">作者:孤尽a>
p>
<p id="price">
¥99
p>
body>
html>
3.6 列表
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
3.7 背景
背景颜色
背景图片
<span class="hljs-selector-tag">div</span> {
<span class="hljs-attribute">width</span>: <span class="hljs-number">1000px</span>;
<span class="hljs-attribute">height</span>: <span class="hljs-number">700px</span>;
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid red;
<span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">"images/009.png"</span>);
}
<span class="hljs-selector-class">.div1</span>{
<span class="hljs-attribute">background-repeat</span>: repeat-x;
}
<span class="hljs-selector-class">.div2</span>{
<span class="hljs-attribute">background-repeat</span>: repeat-y;
}
<span class="hljs-selector-class">.div3</span>{
<span class="hljs-attribute">background-repeat</span>: no-repeat;
}
3.7.1 列表与背景综合练习
html
<div id="nav">
<h2 class="title">全部商品分类h2>
<ul>
<li><a href="#">图书a><a href="#">音像a><a href="#">数字产品a>li>
<li><a href="#">家用电器a><a href="#">手机a><a href="#">数码a>li>
<li><a href="#">电脑a><a href="#">办公a><a href="#">高端a>li>
<li><a href="#">家居a><a href="#">家装a><a href="#">厨具a>li>
<li><a href="#">服饰鞋帽a><a href="#">个护a><a href="#">化妆a>li>
<li><a href="#">礼品箱包a><a href="#">钟表a><a href="#">珠宝a>li>
<li><a href="#">食品饮料a><a href="#">食品a><a href="#">饮料a>li>
<li><a href="#">彩票a><a href="#">旅行a><a href="#">充值a>li>
ul>
div>
css
#nav{
width: 240px;
background: dimgray;
}
.title{
font-size: 18px;
font-weight: bolder;
text-indent: 2em;
line-height: 35px;
background: red url("../images/向下箭头.png") 205px 8px no-repeat;
background-size: 18px 18px;
}
ul li{
height: 40px;
list-style: none;
text-indent: 1em;
background-image: url("../images/向右箭头.png");
background-size: 13px 13px;
background-position: 168px 6px;
background-repeat: no-repeat;
}
a{
color: white;
font-size: 14px;
text-decoration: none;
}
a:hover{
color: orange;
text-decoration: underline;
}
3.8 渐变
调试网址: https://www.grabient.com/
background-color: #4158D0;
background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
4. 盒子模型
4.1 什么是盒子
- margin: 外边距
- padding: 内边距
- border: 边框
4.2 边框
- 边框的粗细
- 边框的样式
- 边框的颜色
<style>
#box{
width: 300px;
border: 1px solid white;
border-top-width: 25px;
border-left-width: 800px;
}
h2{
font-size: 16px;
background-color: brown;
line-height: 30px;
color: white;
}
form{
background: darkgrey;
}
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px dashed red;
}
div:nth-of-type(3) input{
border: 2px dashed blue;
}
style>
4.3 内外边距
padding和margin用法相同,遵循顺时针原则(上右下左)
<div id="box">
<h2>会员登陆h2>
<form action="#">
<div>
<span>用户名: span>
<input type="text">
div>
<div>
<span>密码: span>
<input type="password">
div>
<div>
<span>邮箱: span>
<input type="email">
div>
form>
div>
<style>
#box{
width: 240px;
border: 1px solid white;
margin: 25px 800px;
}
h2{
font-size: 16px;
background-color: brown;
line-height: 30px;
color: white;
}
form{
background: darkgrey;
}
input{
border: 1px solid black;
}
div:nth-of-type(1){
padding: 8px 2px;
}
div:nth-of-type(2){
padding: 8px 2px;
}
div:nth-of-type(3){
padding: 8px 2px;
}
style>
4.4 圆角边框
4个角
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 50px;
}
style>
4.5 阴影
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阴影title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
box-shadow: 10px 10px 10px yellow;
}
img{
border-radius: 30px;
box-shadow: 10px 10px 10px yellow;
}
style>
head>
<body>
<div>div>
<div style="margin: 0 auto">
<img src="images/009.png" alt="">
div>
body>
html>
5. 浮动
5.1 标准文档
块级元素: 独占一行
h1~h6 p div 列表...
行内元素: 不独占一行
span a img strong...
块级元素可以包含行内元素,反之不可
5.2 display
显示
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
display: none;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
style>
- 这个也是一种实现行内元素排列的方式, 但是我们多数情况下都用 *float
5.3 float
左右浮动 float
<div id="father">
<div class="layer01"><img src="images/002.png" alt="">div>
<div class="layer02"><img src="images/logo1.png" alt="">div>
<div class="layer03"><img src="images/nav_r_ico.png" alt="">div>
<div class="layer04">
浮动的盒子可以向左浮动, 也可以向右浮动
div>
<div class="clear">div>
div>
#father {
border: 1px #000 solid;
}
.layer01 {
border: 1px #F00 dashed;
display: inline-block;
float: left;
}
.layer02 {
border: 1px #00F dashed;
display: inline-block;
float: left;
}
.layer03 {
border: 1px #060 dashed;
display: inline-block;
float: right;
}
.layer04 {
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: right;
}
5.4 父级边框塌陷问题
clear
解决方案
-
增加父级元素的高度
-
简单, 但元素假设有了固定的高度, 就会被限制
#father {
border: 1px #000 solid;
height: 800px;
}
-
增加一个空的div标签, 清除浮动
-
简单, 但代码中要尽量避免空div
<div class="clear">div>
.clear {
clear: both;
margin: 0;
padding: 0;
}
-
overflow
-
简单, 但下拉的一些场景避免使用
#father {
border: 1px #000 solid;
overflow: hidden;
}
-
在父类添加一个伪类: after
-
稍微复杂, 但没有副作用 *推荐
#father:after {
content: '';
display: block;
clear: both;
}
5.5 对比
- display
- 方向不可以控制
- float
- 浮动起来的话会脱离文档流, 所以要解决父级边框塌陷的问题
6. 定位
6.1 相对定位
- positon: relative
- 相对于原来的位置, 进行指定的偏移, 仍处于标准文档流中
- top: -20px; 向上
- bottom: -20px; 向下
- left: -20px; 向左
- right: -20px; 向右
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body {
padding: 20px;
}
div {
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father {
border: 1px red solid;
padding: 0;
}
#first {
background: #006600;
border: 1px green dashed;
position: relative;
top: -20px;
left: -20px;
}
#second {
background: #375dff;
border: 1px blue dashed;
}
#third {
background: #986b0d;
border: 1px orange dashed;
position: relative;
right: -20px;
bottom: -20px;
}
style>
head>
<body>
<div id="father">
<div id="first">第一个盒子div>
<div id="second">第二个盒子div>
<div id="third">第三个盒子div>
div>
body>
html>
折叠
6.1.1 练习题 移动方块
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testtitle>
<style>
body {
margin: 10px;
padding: 0;
}
#box {
width: 300px;
height: 300px;
padding: 10px;
border: 1px red solid;
}
a {
width: 100px;
height: 100px;
text-decoration: none;
background: pink;
text-align: center;
line-height: 100px;
color: white;
display: block;
}
a:hover {
background: #0000FF;
}
.a2, .a4{
position: relative;
top: -100px;
right: -200px;
}
.a5 {
position: relative;
top: -300px;
right: -100px;
}
style>
head>
<body>
<div id="box">
<div>
<a class="a1" href="#">链接1a>
<a class="a2" href="#">链接2a>
<a class="a3" href="#">链接3a>
<a class="a4" href="#">链接4a>
<a class="a5" href="#">链接5a>
div>
div>
body>
html>
折叠
6.2 绝对定位
定位: 基于浏览器或父级元素
- 如父级元素没有定位, 则相对于浏览器定位
- 如父级元素存在定位, 则相对于父级元素定位
- 在父级元素范围内移动
相对于父级或者浏览器的位置, 进行指定的偏移, 不处于标准文档流中, 原来的位置不会被保存
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位title>
<style>
body {
padding: 20px;
}
div {
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father {
border: 1px red solid;
padding: 0;
position: relative;
}
#first {
background: #006600;
border: 1px green dashed;
position: absolute;
left: 30px;
}
#second {
background: #375dff;
border: 1px blue dashed;
}
#third {
background: #986b0d;
border: 1px orange dashed;
}
style>
head>
<body>
<div id="father">
<div id="first">第一个盒子div>
<div id="second">第二个盒子div>
<div id="third">第三个盒子div>
div>
body>
html>
6.3 固定定位
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位title>
<style>
body {
height: 1000px;
}
div:nth-of-type(1) {
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2) {
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
style>
head>
<body>
<div>div1div>
<div>div2div>
body>
html>
6.4 z-index
图层
z-index: 默认是0 最高无限
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<div id="content">
<ul>
<li><img src="images/logo.png" alt="">li>
<li class="tipText">学习HTML5li>
<li class="tipBg">li>
<li>时间: 3021-01-01li>
<li>地点: 火星li>
ul>
div>
body>
html>
opacity: 0.5; / 背景透明度/
#content {
padding: 0;
margin: 0;
width: 200px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000000 solid;
}
ul,li {
padding: 0;
margin: 0;
list-style: none;
}
#content ul {
position: relative;
}
.tipText, .tipBg {
position: absolute;
width: 67px;
height: 25px;
top: 112px;
left: 72px;
}
.tipText {
color: white;
z-index: 999;
}
.tipBg {
background: black;
opacity: 0.5;
}
Original: https://www.cnblogs.com/qimu666/p/16565749.html
Author: 柒木木木
Title: 2_CSS
原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/598744/
转载文章受原作者版权保护。转载请注明原作者出处!