脚本宝典收集整理的这篇文章主要介绍了【JavaWeb】前端三剑客—CSS基础知识,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
目录
一、CSS 是什么
二、基本语法规范
三、引入方式
内部样式表
行内样式表
外部样式
三、选择器
标签选择器
类选择器
id 选择器
四、复合选择器
后代选择器
子选择器
伪类选择器
五、常用元素属性
字体属性
文本属性
六、背景属性
背景颜色
背景平铺
七、Chrome 调试工具
标签页含义
元素的显示模式
块级元素
行内元素/内联元素
盒模型
边框
内边距
外边距
层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.
选择器 + {一条/N条声明}
选择器决定针对谁修改 (找谁)
声明决定修改啥. (干啥) 声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值.
<head>
<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 80pxs;
}
</style>
</head>
<body>
<p>hello word</p>
</body>
注意:
CSS 要写到 style 标签中(后面还会介绍其他写法)
style 标签可以放到页面任意位置. 一般放到 head 标签内.
CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换) .
写在 style 标签中. 嵌入到 html 内部. 理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中.
<head>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div style="color: green;">眼睛需要绿色</div>
</body>
</html>
通过 style 属性, 来指定某个标签的样式. 只适合于写简单样式. 只针对某个标签生效.
缺点: 不能写太复杂的样式. 这种写法优先级较高, 会覆盖其他的样式.
实际开发中最常用的方式.
1. 创建一个 css 文件.
2. 使用 link 标签引入 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>Document</title>
</head>
<link rel="stylesheet" href="D:/java2021/前端代码/demo1.css">
<body>
<div>睡觉</div>
</body>
</html>
div{
color: rgb(177, 41, 170);
}
三、选择器
<!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>Document</title>
</head>
<style>
p {
color: red;
}
div{
color: green;
}
</style>
<body>
<p>李白</p>
<p>李白</p>
<p>李白</p>
<div>杜甫</div>
<div>杜甫</div>
<div>杜甫</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>Document</title>
</head>
<style>
.blue{
color: red;
}
</style>
<body>
<div class="bule">小猫</div>
<div>小狗</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>Document</title>
</head>
<style>
.box{
width: 200px;
height: 150px;
}
.red{
background-color: aqua;
}
.green{
background-color: green;
}
</style>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box yellow"></div>
</body>
</html>
语法细节:
类名用 . 开头的
下方的标签使用 class 属性来调用.
一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让 代码更好复用)
如果是长的类名, 可以使用 - 分割.
不要使用纯数字, 或者中文, 以及标签名来命名类名.
<!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>Document</title>
</head>
<style>
#ha{
color: red;
}
</style>
<body>
<div id="ha">哈哈哈</div>
</body>
</html>
CSS使用#开头表示id选择器
id 选择器的值和 html 中某个元素的 id 值相同
html 的元素 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>Document</title>
</head>
<style>
ul li a{
color: red;
}
</style>
<body>
<ul>
<li>aaa</li>
<li>aaa</li>
<li><a href="##">ccc</a></li>
</ul>
</body>
</html>
又叫包含选择器. 选择某个父元素中的某个子元素
元素 1 和 元素 2 要使用空格分割
元素 1 是父级, 元素 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>Document</title>
</head>
<style>
.one li a{
color: blue;
}
</style>
<body>
<ol class="one">
<li>dddd</li>
<li>eeee</li>
<li><a href="#">fff</a></li>
<li><a href="%">fff</a></li>
</ol>
</body>
</html>
可以是任意基础选择器的组合. (包括类选择器, 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>Document</title>
</head>
<style>
.two a{
color: aqua;
}
</style>
<body>
<div class="two">
<a href="#">链接1</a>
<p><a href="*">链接2</a></p>
</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>Document</title>
</head>
<style>
.cat ul li a{
color: red;
}
</style>
<body>
<div class="cat">
<ul>
<li><a href="*">小猫</a></li>
<li><a href="*">小猫</a></li>
</ul>
</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>Document</title>
</head>
<style>
a:link{
/* 去掉a的标签 */
color: black;
}
a:visited{
color: green;
}
a:hover{
color: red;
}
a:active{
color: blue;
}
</style>
<body>
<a href="#">小猫</a>
</body>
</html>
a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)
<!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>Document</title>
</head>
<style>
.font-family .one {
font-family: 'Microsoft YaHei';
}
.font-family .two {
font-family: '宋体';
}
</style>
<body>
<div class="font-family">
<div class="one">
微软眼黑
</div>
<div class="two">
宋体
</div>
</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>Document</title>
</head>
<style>
.color{
color: red;
}
</style>
<body>
<div class="color">你还村民怕是</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>Document</title>
</head>
<style>
.text.one{
text-align: left;
}
.text.two{
text-align: right;
}
.text.three{
text-align: center;
}
</style>
<body>
<div class="text">
<div class="one">左对齐</div>
<div class="two">右对齐</div>
<div class="three">居中对齐</div>
</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>Document</title>
</head>
<style>
.text-decorate .one {
text-decoration: none;
}
.text-decorate .two {
text-decoration: underline;
}
.text-decorate .three {
text-decoration: overline;
}
.text-decorate .four {
text-decoration: line-through;
}
</style>
<body>
<div class="text-decorate">
<div class="one">啥都没有</div>
<div class="two">下划线</div>
<div class="three">上划线</div>
<div class="four">删除线</div>
</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>Document</title>
</head>
<style>
body {
background-color: #f3f3f3;
}
.bgc .one {
background-color: red;
}
.bgc .two {
background-color: #0f0;
}
.bgc .three {
/* 背景透明 */
background-color: transparent;
}
</style>
<body>
<div class="bgc">
<div class="one">红色背景</div>
<div class="two">绿色背景</div>
<div class="three">透明背景</div>
</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>Document</title>
</head>
<style>
.bgr .one {
background-image: url(rose.jpg);
height: 300px;
background-repeat: no-repeat;
}
.bgr .two {
background-image: url(rose.jpg);
height: 300px;
background-repeat: repeat-x;
}
.bgr .three {
background-image: url(rose.jpg);
height: 300px;
background-repeat: repeat-y;
}
</style>
<body>
<div class="bgc">
<div class="one">不平铺</div>
<div class="two">水平平铺</div>
<div class="three">垂直平铺</div>
</div>
</body>
</html>
elements 查看标签结构
console 查看控制台
source 查看源码+断点调试
network 查看前后端交互过程
application 查看浏览器提供的一些扩展功能(本地存储等)
<!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>Document</title>
</head>
<style>
.demo1 .parent {
width: 100px;
height: 100px;
background-color: green;
}
.demo1 .child {
/* 不写 width, 默认和父元素一样宽 */
/* 不写 height, 默认为 0 (看不到了) */
height: 100px;
background-color: red;
}
</style>
<body>
<div class="demo1">
<div class="parernt">
<div class="child">
child1
</div>
<div class="child">
child2
</div>
</div>
</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>Document</title>
</head>
<style>
.demo2 span {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<body>
<div class="demo2">
<span>child1</span>
<span>child2</span>
<span>child3</span>
</div>
</body>
</html>
每一个 HTML 元素就相当于是一个矩形的 "盒子" 这个盒子由这几个部分构成
边框 border 内容 content 内边距 padding 外边距 margin
<!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>Document</title>
</head>
<style>
div{
width: 500px;
height: 250px;
border-width: 10px;
border-style: solid;
border-color: green;
}
</style>
<body>
<div>text</div>
</body>
</html>
粗细: border-width
样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色: border-color
<!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>Document</title>
</head>
<style>
div{
height: 200px;
width: 300px;
padding-top: 5px;
padding-left: 50px;
border-width: 50px;
border-style: solid;
border-color: green;
}
div{
height: 200px;
width: 300px;
}
</style>
<body>
<div>text</div>
</body>
</html>
默认内容是顶着边框来放置的. 用 padding 来控制这个距离 可以给四个方向都加上边距
padding-top padding-bottom padding-left padding-right
<!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>Document</title>
</head>
<style>
div{
background-color: red;
width: 100px;
height: 100px;
}
.first{
margin-bottom: 20px;
}
</style>
<body>
<div class="first">哈哈</div>
<div>呵呵</div>
</body>
</html>
控制盒子和盒子之间的距离. 可以给四个方向都加上边距
margin-top margin-bottom margin-left margin-right
以上是脚本宝典为你收集整理的【JavaWeb】前端三剑客—CSS基础知识全部内容,希望文章能够帮你解决【JavaWeb】前端三剑客—CSS基础知识所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。