CSS—javaEE
文章目录
- 1.引入的方式
-
- 1.1作为HTML的标签属性
- 1.2style标签
- 1.3link标签外部引入css文件
- 2.基础选择器
-
- 2.1标签选择器
- 2.2类选择器
- 2.3id选择器
- 2.4通配符选择器
- 3.复合选择器
-
- 3.1后代选择器
- 3.2子选择器
- 3.3并集选择器
- 3.4伪类选择器
- 4.设置样式
-
- 4.1字体
- 4.2文本
- 4.3背景
- 4.4圆角
- 5.显示模式
- 6.盒模型
- 7.页面布局（弹性布局）
1.引入的方式
1.1作为HTML的标签属性
针对单个元素，无法针对多个元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div style="height: 50px; background-color: coral;">div>
body>
html>
1.2style标签
可以针对多个元素，但是比较耦合，因为是在HTML代码中写CSS代码
DOCTYPE html>
<html lang="en">
<head>
<style>
div {
height: 50px;
background-color: aqua;
}
style>
head>
<body>
<div>div>
body>
html>
1.3link标签外部引入css文件
推荐的写法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<link rel="stylesheet" href="3.css">
head>
<body>
<div>div>
body>
html>
/* 3.css */
div {
height: 50px;
background-color: aqua;
}
2.基础选择器
2.1标签选择器
选择某个标签的所有元素，不能差异性选择
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
h2 {
color: red;
}
p {
color: aqua;
}
style>
head>
<body>
<h2>1h2>
<p>11111p>
<h2>2h2>
<p>22222p>
<h2>3h2>
<p>33333p>
body>
html>
2.2类选择器
（1）可以为任意的HTML标签设置class，这样一个class就可以绑定多个元素，选择某个类就可以为该类的元素设置样式
（2）通过.+类名来选择类
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.red {
color: red;
}
style>
head>
<body>
<h2 class="red">1h2>
<p>11111p>
<h2 class="red">2h2>
<p>22222p>
<h2>3h2>
<p>33333p>
body>
html>
2.3id选择器
（1）HTML元素，可以设置id，但是必须全局唯一
（2）通#+id的值来选择某个id的元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
#red {
color: red;
}
style>
head>
<body>
<h2 id="red">1h2>
<p>11111p>
<h2>2h2>
<p>22222p>
<h2>3h2>
<p>33333p>
body>
html>
2.4通配符选择器
所有的元素都会被匹配上，特殊情况下才使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
* {
color: red;
}
style>
head>
<body>
<h2>1h2>
<p>11111p>
<h2>2h2>
<p>22222p>
<h2>3h2>
<p>33333p>
body>
html>
3.复合选择器
3.1后代选择器
（1）选择的可以是儿子，也可以是孙子
（2）语法：基础选择器1 基础选择器2{}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
ul li{
color: red;
}
style>
head>
<body>
<ul>
<li>aaali>
<li>bbbli>
<li>cccli>
ul>
<ol>
<li>dddli>
<li>eeeli>
<li>fffli>
ol>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
ul li a {
color: red;
}
style>
head>
<body>
<ul>
<li>aaali>
<li>bbbli>
<li>ccc<br><a>会变色a>li>
ul>
<ol>
<li>dddli>
<li>eeeli>
<li>fffli>
ol>
body>
html>
3.2子选择器
（1）选择的只能是儿子
（2）语法：基础选择器1>基础选择器2{}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.two>a {
color: red;
}
style>
head>
<body>
<div class="two">
<a href="#">链接1a>
<p>
<a href="#">链接2a>
p>
div>
body>
html>
3.3并集选择器
（1）多个选择器的并集
（2）选择器1，选择器2{}
（3）这里的选择器可以是基础选择器，也可以是复合选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div,h3,ul li {
color: red;
}
style>
head>
<body>
<div>苹果div>
<h3>香蕉h3>
<ul>
<li>鸭梨li>
<li>橙子li>
ul>
body>
html>
3.4伪类选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* 未被访问时候的样式 */
a:link {
color: black;
/* 去掉 a 标签的下划线 */
text-decoration: none;
}
/* 已经被访问后的样式 */
a:visited {
color: green;
}
/* 鼠标放上去的时候的样式 */
a:hover {
color: red;
}
/* 鼠标按下去未弹起来时候的样式 */
a:active {
color: blue;
}
/* 鼠标聚焦的时候的样式 */
.three>input:focus {
color: red;
}
style>
head>
<body>
<a href="#">小猫a>
<div class="three">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
div>
body>
html>
4.设置样式
4.1字体
（1）字体系列：font-family，引号包裹，多个字体之间“，”间隔
（2）字体大小：font-size，值可以使用px（像素），也可以使用rem（字体的正常大小是1rem，如果设置成2rem就是把原来的字体放大2倍）
（3）字体粗细：font-weight，值的范围是100-900,400就是正常粗细，700就是粗体
（4）字体样式：font-style，值为italic就是设置倾斜字体，值为normal就是取消倾斜
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.font-family .one {
/* 字体显示为隶书 */
font-family: '隶书','Microsoft YaHei';
/* 字体大小设置为30px */
font-size: 30px;
}
.font-family .two {
/* 字体显示为宋体 */
font-family: '宋体';
/* 字体大小设置为2rem（原来字体的2倍） */
font-size: 2rem;
/* 字体的粗细为400（正常粗细） */
font-weight: 400;
/* 字体样式为倾斜 */
font-style: italic;
}
.three {
/* 取消字体倾斜 */
font-style: normal;
}
style>
head>
<body>
<div class="font-family">
<div class="one">
这是隶书
div>
<div class="two">
这是宋体
div>
<em class="three">
这是倾斜字体
em>
div>
body>
html>
4.2文本
（1）文本对齐：text-algin，值为center就是居中对齐，值为left就是靠左，值为right就是靠右
（2）文本颜色：color，值可以是英文单词、16进制的数字、rgb(三个整数)（三原色写法）
（3）文本装饰：text-decoration，值为none表示什么都没有，一般用于a链接标签去除默认的下划线
（4）文本缩进：text-index，一般缩进为2个文字，值设置为2em
（5）行高：line-height，使用的最多的是将文本垂直居中（注意：文本所在的元素行高设置为该行元素高度）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
p {
/* 通过rbg设置文本颜色 */
color: rgb(230, 17, 17);
}
.one {
/* 让文本左对齐 */
text-align: left;
/* 去除链接的下划线 */
text-decoration: none;
}
.two {
/* 让文本右对齐 */
text-align: right;
text-decoration: underline;
}
.three {
/* 让文本居中对齐 */
text-align: center;
/* 上划线 */
text-decoration: overline;
}
.four {
/* 下划线 */
text-decoration: line-through;
}
#indent {
/* 文本缩进2个文字 */
text-indent: 2em;
}
#line-height {
/* 整体高度 */
height: 50px;
/* 背景颜色 */
background-color:red;
/* 行高 */
line-height: 50px;
}
style>
head>
<body>
<p>要开心p>
<h2>div对齐h2>
<div class="one">左对齐div>
<div class="two">右对齐div>
<div class="three">居中对齐div>
<h2>span不会对齐h2>
<span class="one">左对齐span>
<br>
<span class="two">右对齐span>
<br>
<span class="three">居中对齐span>
<h2>文本装饰h2>
<div class="one">啥都没有div>
<div class="two">下划线div>
<div class="three">上划线div>
<div class="four">删除线div>
<h2>文本缩进h2>
<p id="indent">要快乐p>
<h2>行高h2>
<div id="line-height">每天div>
body>
html>
4.3背景
（1）背景色：background-color，值为颜色值
（2）背景图片：background-image，值为url（图片路径）
（3）背景平铺：background-repeat，值为no-repeat表示不平铺，默认的是repeat表示x轴和y轴都会平铺
（4）背景位置：background-position：x值，y值（x值：top（顶）、bottom（底）、px（像素）、百分比）（y值：left（左）、right（右）、center（居中）、px、百分比）
（5）背景尺寸：background-size，值可以是px、百分比、cover（x轴占满）、contain（包含整个背景）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
#d1 {
width: 220px;
height: 220px;
/* 背景图片 */
background-image: url(花花.jpg);
}
#d2 {
width: 500px;
height: 500px;
/* 背景图片 */
background-image: url(花花.jpg);
/* 背景平铺：repeat表示x轴和y轴都会平铺 */
background-repeat: repeat;
}
#d3 {
width: 500px;
height: 500px;
/* 背景图片 */
background-image: url(花花.jpg);
/* 背景平铺：no-repeat表示不平铺 */
background-repeat: no-repeat;
/* 背景的位置 */
/* background-position: center bottom; */
background-position: 50% 50%;
}
#d4 {
width: 800px;
height: 500px;
/* 背景图片 */
background-image: url(花花.jpg);
/* 背景平铺：no-repeat表示不平铺 */
background-repeat: no-repeat;
/* 背景尺寸:contain表示包含整个背景,cover表示x轴占满，但是可能不会包含全部图片 */
background-size: contain;
/* background-size: cover; */
}
style>
head>
<body>
<h2>背景图片h2>
<div id="d1">开心div>
<br>
<h2>图片平铺h2>
<div id="d2">开心div>
<h2>图片位置h2>
<div id="d3">开心div>
<h2>图片尺寸h2>
<div id="d4">开心div>
body>
html>
4.4圆角
border-radius，值设置为50%就是圆形
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div {
background-color: red;
height: 200px;
width: 200px;
}
#r10px {
/* 圆角10px */
border-radius: 10px;
}
#r50px {
/* 圆形 */
border-radius: 50%;
}
style>
head>
<body>
<h2>没有设置圆角h2>
<div>div>
<h2>圆角10pxh2>
<div id="r10px">div>
<h2>圆形h2>
<div id="r50px">div>
body>
html>
5.显示模式
display，值可以为block（块级）、inline（内联）、none（隐藏不显示）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.div {
/* div默认是block（块级） */
display: inline;
}
.span {
/* span默认是inline（内联） */
display: block;
}
.none {
/* 隐藏不显示 */
display: none;
}
style>
head>
<body>
<h2>divh2>
<div class="div">1div>
<div class="div">2div>
<div class="div">3div>
<h2>spanh2>
<span class="span">1span>
<span class="span">2span>
<span class="span">3span>
<h2>display: noneh2>
<div class="none">1div>
body>
html>
6.盒模型
（1）边框：border：粗细 样式 颜色
（2）内边距：padding：上 右 下 左（表示内容和边框距离，值可以是px）（padding-top：顶的内边距；padding-bottom：底的内边距；padding-left：左边的内边距；padding-right：右边的内边距）
（3）外边距：margin：上 右 下 左（表示外边元素和自己的距离，值是0 auto表示块级元素水平居中）
（4）记得去除浏览器的边距的默认值
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div {
background-color:red;
width: 200px;
height: 100px;
}
#d1 {
/* 设置边框：粗细 样式 颜色 */
border: 2px solid red;
}
#d2 {
/* 内边距 */
padding: 5px
}
.m {
/* 设置边框：粗细 样式 颜色 */
border: 2px solid red;
/* 外边距 */
margin: 50px;
}
.auto {
/* 设置边框：粗细 样式 颜色 */
border: 2px solid red;
/* 块级元素居中对齐 */
margin: 0 auto;
}
/* 去除浏览器的默认值 */
* {
margin: 0;
padding: 0;
}
style>
head>
<body>
<h2>边框h2>
<div id="d1">div>
<h2>内边距h2>
<div id="d2">111111111111111111111111111111111111111div>
<h2>外边距h2>
<div class="m">div>
<div class="m">div>
<div class="auto">div>
body>
html>
7.页面布局（弹性布局）
（1）display：flex（设置为弹性布局）
（2）写在父盒子上，作用在子元素上，控制子元素的位置和排列方式，不含孙子元素
（3）内联元素设置高，宽不会生效，使用弹性布局，宽就有效了
（4）使用了弹性布局，子元素是内联还是块级元素，效果是一样的
（5）主轴假设是x轴（默认)，子元素如果没有设置高度，默认就是父元素整个高度
（6）把父盒子称为flex容器，子元素称为flex item子元素排列的方向主轴
（7）设置主轴排列方式：justify-content：前，后，居中，间隔
（8）设置侧轴排列方式：align-items：前，后，居中，间隔
创建一个 div, 内部包含三个span
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div {
width: 100%;
height: 150px;
background-color: red;
}
div>span {
background-color: green;
width: 100px;
}
style>
head>
<body>
<div>
<span>1span>
<span>2span>
<span>3span>
div>
body>
html>
加上display: flex;
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div {
width: 100%;
height: 150px;
background-color: red;
/* 设置为弹性布局 */
display: flex;
}
div>span {
background-color: green;
width: 100px;
}
style>
head>
<body>
<div>
<span>1span>
<span>2span>
<span>3span>
div>
body>
html>
再给 div 加上 justify-content: space-around
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div {
width: 100%;
height: 150px;
background-color: red;
/* 设置为弹性布局 */
display: flex;
/* 设置主轴排列方式：flex-end（向后排列）；space-around（间隔排列，行前行后都有距离）；flex-start（向前排列）；center（居中排列）；space-between（行与行之间有间距） */
justify-content: space-around;
}
div>span {
background-color: green;
width: 100px;
}
style>
head>
<body>
<div>
<span>1span>
<span>2span>
<span>3span>
div>
body>
html>
主轴和侧轴一起设置
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
#container {
width: 100%;
height: 150px;
background-color: red;
/* 设置为弹性布局 */
display: flex;
/* 设置主轴的排列方式（默认是x轴） */
justify-content: space-around;
/* 设置侧轴的排列方式 */
align-items: center;
}
#container>div {
background-color: green;
width: 100px;
height: 50px;
}
style>
head>
<body>
<div id="container">
<div>1div>
<div>2div>
<div>3div>
div>
body>
html>
