标签选择器
选中所有的标签 以标签命名的选择器
p{} 标签名{css属性名:属性值}类选择器
通过类名找到页面中带有这个类名的标签,设置样式
所有的标签都可以加class
类名只能由数字,字母,下划线,中划线组成,不能哦用数字或中划线开头
一个标签可以有多个类名,类名之间用空格
类名可以重复,一个类选择器可以同时选择多个标签
.类名{css属性名:属性值}
在标签名中加 class="类名”
<style>
.red{
color: blanchedalmond;
}
</style>
<p class="red">1111</p>
.red{
color: blanchedalmond;
}
.li{
font-size: 66px;
}
<p class="red li">1111</p>
id选择器(配合js加动态)(规定,但不报错)
#id属性值{css属性名:属性值}
作用 通过id属性值 找到页面中带有id属性值的标签,设置样式
所有的标签都有id属性
id属性值类似于身份证,一个页面中是唯一的,不可重复
一个标签只能有一个id属性值
一个id选择器只能选中与一个标签
通配符选择器
*{css属性名:属性值}
找到页面中所有的标签,设置样式
可以去除标签默认单独margin和padding
内 外边距
字体和文本样式
字体样式
字体大小 font-size
数字+px谷歌默认16px
单位要设置不然无效
字体粗细 font-weight
取值:关键字:
正常 normal
加粗 bold
100-900数字整百
正常 400
加粗 700
不是所有字体都提供了九种粗细,因此部分取值页面中无效
字体样式 font-style
正常 normal
倾斜 italic
字体类型 font-family
具体字体:Microsoft YaHei,微软雅黑,黑体,宋体 楷体
字体系列 sans-serif(无衬线)网页
serif(衬线) monospace(等宽)
渲染规则
从左往右按照顺序查找,若未安装该字体,则显示下一个
如果都不支持,会显示最后字体系列的默认字体
font-family: 微软雅黑, 黑体,sans-serif;
如果字体名称中存在多个单词,推荐使用引号包裹
最后一项字体系列不需要引号
网页开发中,尽量使用系统常见自带字体,保证不同用户 浏览网页都可以正常显示
win默认微软雅黑 mac默认 苹方
样式的层叠问题
一个标签设置了相同的属性,样式会层叠 写在最下面的生效
css 叫 层叠样式表
字体类型 font属性连写
font :style weight size family
省略要求:
只能省略前2个,省略了相当于设置了默认值
同时设置了单独和连写
1.把单独的样式写在连写下面
2.把单独的样式写在连写里面
文本样式
属性名:text-indent
取值 数字+px
数字+em(1em=当前标签的font-size的大小)一个字的大小
浏览器默认16px,首先缩进2个就是32px
内容水平对齐方式(图也是)
text-align
left 左对齐
center 居中对齐
right 右对齐
可以更改其他标签,需要在父标签中设置
文本修饰
text-decoration
属性值:underline 下划线
line-through 删除线
overline 上划线
none 无装饰线
会用 text-decoration:none ;清楚a标签默认的下划线
行高
控制一行的上下行间距
属性名:line-height
取值 数字+px 或倍数(当前font-size的倍数)
让单行文本垂直居中可以设置line-height 文字父元素高度
网页精准布局时,会设置 line-height:1 可以取消上下间距
行高与font连写注意
如果同时设置了行高和font连写 注意覆盖问题
font:style weight size/line-height family
行高是上间距+文本高度+下间距
chrome调试工具
颜色取值
属性名:文字颜色 color
背景颜色 background-color
关键词 red、bule,,。
rgb表示 rgb(11,11,11)红绿蓝
rgb表示 rgba(11,11,11,0.5)+a表示透明度 取值为0-1
十六进制表示 #ff0000
00 00 00 红绿蓝如果2个数字一样就可以简写 f 0 0
标签水平居中 margin:0 auto
0表示上下间距 auto表示左右
让 div p h(大盒子)水平居中 直接给当前元素本身设置即可
一般针对于固定宽度的盒子 如果大盒子没有设置宽度 会默认占满父元素的宽度
div用来网页布局 一个页面可能用多次 如果使用div
尽量使用类名控制样式
选择器进阶
复合选择器
后代选择器:空格
根据html标签的嵌套关系,选择父元素后代中满足条件的元素
语法:选择器1 选择器2 {css}
结果:在选择器1所找到的标签的后代(儿子,孙子。。。。)中,找到满足选择器2的标签,设置样式
(要有父子嵌套)
子代选择器:>(只包含儿子)
作用:根据html标签的嵌套关系,选择父元素后代中满足条件的元素
语法:选择器1>选择器2{css}
在选择器1所找到标签的子代(儿子)中,找到满足选择器2的标签,设置样式
并集选择器
同时选择多组标签,设置相同样式
语法:选择器1,选择器2{css}
结果:找到选择器1和2选中的标签
并集选择器在中的每组选择器可以是基础选择器或复合选择器
,通常每组选择器一行写一个
p,
div,
span{
color: chocolate;
}
交集选择器
选出同时满足多个选择器的标签
选择器1选择器2{css}
交集选择器之间紧挨,无其他东西隔开,如果有标签选择,标签必须写在前面
hover伪类选择器
作用:选中鼠标悬停在元素上的状态
选择器:hover{css}
任何标签都可以添加,都可以鼠标悬停
Emmet语法
通过简写语法快速生成代码
如:
写div tab键生成<><>
p.box-><p class=“box”></p>
#->id
同级+
div+p-><div><P>
父子>
多个
ul>li{111}*3
ul>li{$)*3 $1 2 3
提示css属性
单词首字母
<!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> .red{ color: blanchedalmond; } .li{ font-size: 66px; } .red{ background-color: aqua; color: black; } *{ color:blueviolet; } p{ font-weight: 700; font-style: oblique; font-size: larger; font-family: 微软雅黑, 黑体,sans-serif; } p{ font: 800 italic 16px/2 宋体; } p{ text-indent: 2em; text-align: center;text-align: center; /* line-height: 5; */ /* 40px */ } body{ text-align: center; } img{ height: 200px; /* weight: 200px; */ } a{ text-decoration: none; } div{ width: 300px; height: 300px; background-color: yellowgreen; margin: 0 auto; } /* div p{ color: aquamarine; } */ div > p{ color:blue; } p, div, span{ color: chocolate; } p.box{ color: blueviolet; } a:hover{ color: black; background-color: aquamarine; } img{ display: block; } </style> </head> <body> <p>lllllaA1</p> <p class="red li">1111</p> <p>1233</p> <img src="./1.jpg" alt=""> <a href="#">空链接</a> <div> <p>div的儿子p <a href="#">kong</a> </p> </div> <p>ppp</p> <div>ssss</div> <span>dsadas </span> <p class="box">123123</p> <p>1111111111111</p> <div class="box"> 12312321</div> </body> </html>
<!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>
body
{
background-color: #f5f5f5;
}
.goods{
width: 234px;
height: 400px;
background-color: #fff;
margin: 0 auto;
text-align: center;
}
img{
width: 160px;
height: auto;
}
h3{
color: black;
font-size: 10px;
line-height: 25px;
}
.info{
color: #ccc;
font-size: 12px;
line-height: 30px;
}
.mon{
font-size: 14px;
color: #ffa500;
}
</style>
</head>
<body>
<div class="goods">
<div> </div>
<div> </div>
<img src="./1.jpg" alt="">
<h3>荷花</h3>
<p class="info">我的眼睛</p>
<p class="mon">199999999999999999999元</p>
</div>
</body>
</html>
<!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>
div
{
height: 500px;
width: 400px;
background-color: pink;
margin: 0 auto;
}
.center{
text-align: center;
}
.color1{
color: aquamarine;
}
.color2{
color:beige;
}
.color3{
color:black;
}
a{
text-decoration: none;
}
.indent{
text-indent: 2em;
}
</style>
</head>
<body>
<div >
<h1 class="center">标题</h1>
<p class="center">
<span class="color1">2023年7月9日15:47:51 </span>
<a href="https://www.baidu.com/" target="_blank" class="color2">百度</a>
<a href="#" target="_blank" class="color3">收藏</a>
</p>
<hr>
<p class="indent">
让单行文本垂直居中可以设置line-height 文字父元素高度
网页精准布局时,会设置 line-height:1 可以取消上下间距
</p>
<p class="indent">
让单行文本垂直居中可以设置line-height 文字父元素高度
网页精准布局时,会设置 line-height:1 可以取消上下间距</p>
<p class="indent">
让单行文本垂直居中可以设置line-height 文字父元素高度
网页精准布局时,会设置 line-height:1 可以取消上下间距 </p>
</div>
</body>
</html>
背景相关属性
背景bgc(简写)
背景默认透明
背景图bgi(简写)
属性值url(‘路径’)
如果图小盒子大会自动填图
背景平铺 bgr(填图)
background-repeat
属性值
repeat 默认 水平竖直都平铺
no-repeat 不平铺
repeat-x沿x轴方向水平平铺
repeat-y沿y轴方向垂直平铺
背景位置
background-position bgp
第一个水平方向 第二个是垂直方向
属性值
1.方位名词
水平(left center right )
垂直(top center bottom )
2.数字+px(坐标)
原点(0,0)左上角
x水平向右
y垂直向下
背景相关属性连写
background bg
顺序 background :color image repeat position 不分顺序(位置如果是英文单词可以交换顺序,数字不行)
如果设置单独的样式和连写,把单独样式写在下面或里面
img(插入图)和背景图的区别
img用于实现重要的图片
背景图用不重要的
背景图是div中background-image
元素 标签 标记-> <>
常见的元素显示模式有
块级元素
独占一行 宽度默认父元素的宽度 高度默认由内容撑开
可以设置宽高
div p h ul li dl dt dd form header nav footer
行内元素
一行可以显示多个
宽度和高度默认由内容撑开 设置宽高不生效
不可以设置宽高
a span b u i s strong ins em del
行内块元素
一行可以显示多个
可以设置宽高
input textarea buton select
img标签有行内块元素特点 但是Chrome调试工具中显示结果是inline
元素显示模式转换
改变元素默认的显示特点,让元素符合布局要求
语法:
属性
放在css里面
display:block 转换成块级元素
display:inline-block 转换成行内块元素
display:inline 转换成行内元素
html嵌套规范
块级元素作为大容器 可以嵌套:文本 块级元素 行内元素 行内块元素
但是p标签中不嵌套div p h 等块级元素
a标签内部可以嵌套任意元素 但不能嵌套a标签
css特性
继承性
子元素有默认继承父元素样式的特点
文字控制属性都可以继承
color
font-style font-weight font-size font-family
text-indent text-align
line-height
a标签的color会继承失败
h系列标签的font-size会继承失效
层叠性
给同一个标签设置不同的样式 样式重叠共同作用
给用一个标签设置相同的样式 样式重叠 最后的生效
当样式冲突 只有选择器优先级相同才能通过层叠判断结果
通过hover实现鼠标悬停
展示不同信息
<!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>
a{
width: 100px;
height: 100px;
background-color:blueviolet;
display: inline-block;
text-align: center;
text-decoration: none;
/* 下划线不要 */
color: aquamarine;
line-height: 100px;
}
a:hover{
color: black;
background-color:yellow;
}
</style>
</head>
<body>
<a href="#">地址1</a>
<a href="#">地址2</a>
<a href="#">地址3</a>
<a href="#">地址4</a>
<a href="#">地址5</a>
</body>
</html>
<!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>
a{
width: 600px;
height: 400px;
font-size: larger;
display: inline-block;
text-align: center;
text-decoration: none;
/* 下划线不要 */
color: aquamarine;
line-height: 400px
}
.one{
background-image: url(./_DSC6737-4.jpg);
}
.two{
background-image: url(./_DSC6930-1.jpg);
}
.one:hover{
color: brown;
background-image: url(./_DSC6930-1.jpg);
}
.two:hover{
color: brown;
background-image: url(./_DSC6737-4.jpg);
}
</style>
</head>
<body>
<a href="#" class="one">地址1</a>
<a href="#" class="two">地址2</a>
</body>
</html>