知识点
1.CSS基本使用
2.CSS选择器
3.CSS字体/文本
4.CSS背景
知识点一 CSS基本使用
CSS 是什么
CSS 全称 Cascading Style Sheets翻译过来就是层叠样式表
如果说HTML是网页的结构那么CSS就是网页化妆师CSS怎么学
多敲多练多思考CSS 写在哪里
CSS 有三种写法
1.直接写在标签内
2.写在style标签内
3.使用外部 .css 文件
三种引入方式代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外链样式 （在style之前引入）-->
<link rel="stylesheet" href="index.css">
<style>
/*内嵌样式*/
div{
height: 200px;
background: rebeccapurple !important /*声明 我是最大的 js都无法更改 慎用！*/
}
</style>
</head>
<body>
<!--行间样式-->
<!-- <div style="background: red; height: 200px"></div>-->
<div></div>
</body>
</html>
<!--行间样式 > 内嵌CSS样式 > 外链样式（在style之前引入）-->
<!--可用 ！important强制优先-->知识点二 CSS选择器
选择器是什么
CSS的选择器是CSS最基础也是最重要的一个知识点 很重要选择器权重
谁的权力大，就听谁的，同理，选择器权重也是一样，谁的权重值高，应用谁的选择器用处
用于准确的选中元素，并赋予样式
/* class和id选择器 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* *通配符选择器 匹配任何元素 */
*{
padding: 0;
margin: 0;
background: darkturquoise;
}
/*id选择器 给标签设置一个id属性，在写样式时，在id名字前面加上个 #*/
#box{
background: rebeccapurple;
}
/*元素选择器 选择相同的元素 对相同的元素设置一种css样式 选中页面中所有的元素*/
div{
height: 50px;
width: 200px;
background: slateblue;
}
/*class选择器 给标签设置一个c1ass属性，
在写样式时，在c1ass名字前面加个 .
一般给具有相同属性的元素设置同一个c1ass*/
.jianqi{
background: chartreuse;
}
</style>
</head>
<body>
<div class="jianqi">1</div>
<div id="box">2</div>
<div>3</div>
<p>5</p>
<div class="jianqi">4</div>
<!--htm1书写规范
1.名字用小写字母
2.以英文开头，可以包含英文字母，数字,_,-,不能使用中文
3.驼峰命名
className 第二个单调字母大写
4.id命名
id只能有一个名字，而且在页面中相同的名字只能出现一次，相当于身份证一样
5.class命名
c1ass可以出现多次，而且相同的名字可以有很多个，相当于人名一样
!-->
</body>
</html>
<!-- id > class > tagname > * -->/* 复杂选择器 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 50px;
background: yellow;
}
/*群组选择器 对几个有相同属性的选择器进行样式设置两个选择器之前必须用逗号隔开*/
.box,p{
height: 50px;
background: aqua;
}
</style>
</head>
<body>
<div class="box"></div>
<p></p>
<div></div>
</body>
</html>/* 兄弟选择器 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*兄弟选择器，操作的对象是该元素下的所有的兄弟*/
div~p{
height: 30px;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>
<p>p4</p>
<p>p5</p>
</div>
<p>p6</p>
<p>p7</p>
</body>
</html>/* 相邻选择器 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*相邻选择器操作的对象是该元素的同级元素选择div相邻的
下一个兄弟元素选择紫随目标元素后的第一个元素*/
div + p + p{
height: 30px;
background: red;
}
</style>
</head>
<body>
<p>p0</p>
<div class="box"></div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>
<p>p4</p>
<p>p5</p>
</div>
<p>p6</p>
<p>p7</p>
</body>
</html>/* 子代选择器 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*子类选择器 只去掉儿子的 */
.box > li{
list-style: none;
}
</style>
</head>
<body>
<ul class="box">
<li>1
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</body>
</html>/* 后代选择器 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器 空格 找所有满足条件的后代*/
div li{
list-style: none;
}
</style>
</head>
<body>
<div>
<ul class="box">
<li>1
<ul>
<li>我在这里面</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</div>
<ul>
<li>我在外面</li>
</ul>
</body>
</html>/* 选择器优先级 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*这是同一个元素，首先你得是div 其次你的class名字叫做box*/
div.box{
height: 50px;
background: red;
}
/* 有空格和没空格完全是两码事*/
div .box{
background: yellow;
}
</style>
</head>
<body>
<div class="box"></div>
<p class="box">456</p>
</body>
</html>
<!-- 范围越小 优先级越高 -->
<1--1.先比id(最高位) class(中间位) tagname(个数位)-->
<1--2.id 选择器个数不相等，id越多(要么0要么1)，优先级越高-->
<1--3.id选择器个数相同，则看c1ass，class多的优先级高-->
<1--4.class个数相等，就看tagName个数-->
/* 伪类选择器 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
/*未访问过的样式*/
a:link{
color: blue;
}
/*访问过后的样式*/
a:visited{
color: yellow;
}
/*划过的样式*/
a:hover{
color: rebeccapurple;
}
/*激活的样式*/
a:active {
color: red;
}
/*div{*/
/* width: 50px;*/
/* height: 50px;*/
/* background: blue;*/
/*}*/
/*div:hover{*/
/* background: red;*/
/*}*/
/*div:hover span{*/
/* color: aqua;*/
/*}*/
#box{
width: 250px;
height: 250px;
background: chartreuse;
}
#box p{
width: 100px;
height: 100px;
background: red;
display: none; /*隐藏元素*/
}
#box:hover p{
display:block;
}
</style>
</head>
<body>
<!--伪类: 同一个标签，根据其不同的种状态，有不同的样式。
这就叫做“伪类”。伪类用冒号来表示。
超链接的四种状态
：focus 是某个标签获得焦点时的样式（比如某个输入狂获得焦点）
-->
<a href="http://www.baidu.com">百度</a>
<!-- <div>-->
<!-- <span>我爱jianqi</span>-->
<!-- </div>-->
<div id="box">
<p></p>
</div>
</body>
</html>知识点三 CSS字体/文本
#文字常用样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*html{*/
/* font-size: 20px;*/
/*}*/
.box1{
font-family: "Arial Black";
}
.box2{
font-family: "fasd","Arial Black"; /* 没有第一个就用第二个 */
}
/* font-size 字体大小px
单位 px % em em
px 谷歌默认字体是16像素 最小是12px
rem 相对于html(根标签)的字体大小
em 等于父级的字体尺寸--相对于父级字体大小而言的
% 相对于符容器中字体的%调整 */
.box3{
font-size: 50px;
}
.box4{
font-size: 2rem;
}
.box5{
font-size: 500%;
}
/*
font-weight 字体粗细
关健字
norma] 默认字体
1ighter 较细
bo1d 加粗 这个要知道
bolder 很粗
给值
只能100--900 的整百数
400相当于正常的
700相当于bo1d 粗体
900相当于bolder 粗体的
*/
.box6{
font-weight: bold;
}
/*
font-style 字体类型
norma] 默认 文字正常
italic 文字斜体
oblique 文字斜体
区别:italic和oblique都是向右倾斜的文字，
但区别在于Ita1ic是指斜体字，而oblique是倾斜的文字，
对于没有斜体的字体应该使用oblique属性值来实现倾斜的文字效果,*/
.box7{
font-style: italic;
}
/*
color 文字颜色
关键字
英文单调 red green
16进制 (0-9 a-f)
# 6644aa # 64a # abd456
# dddddd # ddd
rgb(0-255,0-255,0-255)
r red
g greenb
b blue
rgba(0-255,0-255,0-255,0-1)
r red
g greenb
b blue
a alpha(透明度)
0 完全透明
1 完全不透明
*/
.box8{
font-size: 30px;
color: rgb(200,0,0,0.1);
}
</style>
</head>
<body>
<div class="box1">hello world 我爱祖国</div>
<div class="box2">hello world 我爱祖国</div>
<div class="box3">hello world 我爱祖国</div>
<div class="box4">hello world 我爱祖国</div>
<div class="box5">hello world 我爱祖国</div>
<div class="box6">hello world 我爱祖国</div>
<div class="box7">hello world 我爱祖国</div>
<div class="box8">hello world 我爱祖国</div>
<div class="box9">hello world 我爱祖国</div>
<div class="box0">hello world 我爱祖国</div>
</body>
</html>
#文本常用样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
background: chartreuse;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p{
text-indent: 2em;
line-height: 30px;
letter-spacing: 1px;
}
.wrap{
background: rebeccapurple;
width: 600px;
height: 100px;
line-height: 100px;
text-align: center;
}
/*
text-transform 文本大小写
none 默认值 无转换发生
uppercase 转换成大写
lowercase 转换成小写
capitalize 将英文单词的首字母大写
*/
span{
text-decoration:line-through;
}
capita1ize 将英文单词的首字母大写
</style>
</head>
<body>
<div class="box">
有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如
长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。
明智者若善用其明智，即可从此云空中，读示一
小文，文中有微叹与沉默，色与香，爱和怨。无著者姓名。
无年月。无故事。无……然而内容极柔美。虚空静寂，
读者灵魂中如有音乐。虚空明蓝，读者灵魂上却光明净洁。
</div>
<p>
大门前石板路有一个斜坡，坡上有绿树成行，
长干弱枝，翠叶积叠，如翠等，如羽葆，
如旗帜。常有山灵，秀腰白齿，往来其间。
遇之者即喑哑。爱能使人喑哑——一种语言歌呼之死亡。
“爱与死为邻”。
</p>
<p>
<span>
大门前石板路有一个斜坡，坡上有绿树成行，
长干弱枝，翠叶积叠，如翠等，如羽葆，如旗帜。
常有山灵，秀腰白齿，往来其间。遇之者即喑哑。
爱能使人喑哑——一种语言歌呼之死亡。“爱与死为邻”。
</span>
</p>
<div class="wrap">
你看看好，应当有一粒星子在花中。仔细看看。
</div>
</body>
</html>知识点四 CSS背景
#背景常用样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:500px;
height:500px;
/* 颜色 图片 位置 大小 */
background: rebeccapurple url("1.png") 100px 100px/150px 250px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>