CSS:层叠样式表
所谓层叠 即叠加的意思,表示样式可以一层一层的层叠覆盖
css写在style标签中,style标签一般写在head标签里面,title标签下面
<!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>p{/* */color: white;/* */font-size: 30px;/* */background-color: black;/* */width: 300px;height: 400;}</style>
</head>
<body><p>这是一个p标签</p>
</body>
</html>
CSS的引入方式:
内嵌式:CSS写在style标签中
style标签虽然可以写在页面的任意位置,但是通常约定写在head标签中
外联式:CSS写在一个单独的.css文件中
需要通过link标签在网页中引入
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
//stylesheet 样式表<link rel="stylesheet" href="./my.css">
</head>
<body><p>活在当下 </p>
</body>
</html>
p{color: aquamarine;
}
行内式:CSS写在标签的style属性中 配合js使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行内式</title>
</head>
<body><p style="color: aqua; font-size: 30px; background-color: blanchedalmond;" >This is yellowgreen.</p>
</body>
</html>
CSS常见三种引入方式的特点区别有哪些?
引入方式 | 书写位置 | 作用范围 | 使用场景 |
内嵌式 | CSS写在style标签中 | 当前页面 | 小案例 |
外联式 | CSS写在单独的css文件中,通过link标签引入 | 多个页面 | 项目中 |
行内式 | CSS写在标签的style属性中 | 当前标签 | 配合js使用 |
基础选择器:
1.标签选择器
结构:标签名{ css 属性名:属性值;}
作用:通过标签名,找到页面中所有这类的标签,设置样式
注意点:
1.标签选择器选择的是一类标签,而不是单独某一个
2.标签选择器无论嵌套关系有多深,都能找到对应的标签
<!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>/* 选择器{} *//* 标签选择器就是以标签名命名的选择器 *//* 标签选择器选中的所有的这个标签都生效 */p{color: chocolate;background-color: bisque;font-size: 30px;}</style>
</head>
<body><p>这是一个p标签</p><p>这也是一个p标签</p>
</body>
</html>
2.类选择器
结构:.类名{ css属性名:属性值;}
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式
注意点:
1.所有标签上都有class属性,class属性的属性值称为类名(类似于名字)
2.类名可以由数字 字母 下划线 中划线组成,但是不能以数字或者中划线开头
3.一个标签可以同时有多个类名,类名之间以空格隔开
4.类名可以重复,一个类选择器可以同时选中多个标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类选择器</title><style>.color{color: lightcoral;}.size{font-size: 20px;}</style>
</head>
<body><p class="color size">这是一个p标签</p><div class="color">这是一个div标签</div>
</body>
</html>
3.id选择器
结构:#id属性值{ css属性名:属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式
注意点:
1.所有标签上都有id属性
2.id属性值类似于身份证号,在一个页面 中是唯一的,不可重复
3.一个标签上只能有一个id属性值
4.一个id选择器只能选择一个标签
4.通配符选择器
结构:*{css 属性名:属性值;}
作用:找到页面中所有的标签,设置样式
注意点:
1.开发中使用极少,只会在极特殊情况下才会用到
2.在小页面中可能会用于去除标签默认的margin和padding
字体和文本样式
1.字体大小
属性名:font-size
取值:数字+px
注意点:
谷歌浏览器默认文字大小是16px
单位需要设置,否则无效
2.字体粗细
属性名:font-weignt
关键字:
正常 | normal |
加粗 | bold |
纯数字:
正常 | 400 |
加粗 | 700 |
注意点:
不是所有字体都提供了九种粗细,因此部分取值页面中无变化
实际开发中:正常加粗两种取值使用最多
3.字体样式(是否倾斜)
属性名:font-style
取值:
正常(默认):normal
倾斜:italic
字体系列 font-family
样式的层叠问题
如果给同一个标签设置了相同的样式,此时样式会层叠(覆盖),写在最下面的会生效
字体font相关属性的连写
属性名:font(复合属性)
取值:font:style weight size family;
省略要求:只能省略前两个,如果省略了相当于
设置了默认值
注意点:如果需要同时设置单独和连写形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
文本缩进
属性名:text-indent
取值:
*数字+px
*数字+em(推荐:1em=当前标签的font-size的大小)
<!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>p{text-indent: 2em;}</style>
</head>
<body><p>神舟十七号航天员汤洪波、唐胜杰、江新林密切协同,在空间站机械臂和地面科研人员的配合支持下,完成全部既定任务,航天员汤洪波、江新林安全返回问天实验舱,出舱活动取得圆满成功</p>
</body>
</html>
文本水平对齐方式
属性名:text-align
取值:
属性值 | 效果 |
left | 左对齐 |
center | 居中对齐 |
right | 右对齐 |
注意点:如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置
<!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>h1{text-align: center;}p{text-align: right;}div{text-align: left;}</style>
</head>
<body><h1>新闻标题</h1><p>这是一个p标签</p><div>这是一个div标签</div>
</body>
</html>
文本修饰
属性名:text-decoration
取值:
属性值 | 效果 |
underline | 下划线(常用) |
line-through | 删除线(不常用) |
overline | 上划线 |
none | 无装饰线(常用) |
注意点:开发中会使用text-decoration:none;清除a标签默认的下划线
<!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>p{text-decoration: underline;}div{text-decoration: line-through;}h2{text-decoration: overline;}a{text-decoration: none;}</style>
</head>
<body><p>ppppp</p><div>divdivdiv</div><h2>h2h2h2</h2><a href="">我是超链接 点点看😉😉😉</a>
</body>
</html>
水平居中的方法总结 text-align:center
text-align:center能让哪些元素水平居中?
1.文本
2.span标签 a标签
3.input标签 img标签
注意点:
如果需要让以上元素水平居中,text-align:center需要给以上元素的父元素设置
<!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>p{text-align: center;}body{text-align: center;}</style>
</head>
<body><p>图片</p><img src="beauty.jpg" alt="正在加载中" title="这是一个美女图片" width="400">
</body>
</html>
行高
作用:控制一行的上下间距
属性名:line-height
取值:
*数字+px
*倍数
应用:1.让单行文本垂直居中可以设置line-height:文字父元素高度
2.网页精准布局时,会设置line-height:1可以取消上下间距
行高与font连写的注意点:
*如果同时设置了行高和font连写,注意覆盖问题
*font:style weight size/line-height family;
<!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>p{font: italic bold 32px/1.5 宋体;}</style>
</head>
<body><p>没错。原子弹爆炸的条件既不是铀的“临界质量”,也不是铀的“临界密度”,而是基于“碰撞截面”和铀块形状、反射层 / 反射率等等共同决定的一个复杂参数。什么叫“碰撞截面”呢?还记得高中学过的卢瑟福实验吗?没错,用α粒子轰击金箔,这才发现金箔对α粒子几乎是透明的——然后,揭示了一个事实:原子核是一个极小极小的核,原子之间是极其空旷的。换句话说,固体中,原子和原子并不是像这样,一堆实心小球堆叠起来的我们知道,想要引起铀核裂变,就需要让中子击中原子核。</p>
</body>
</html>
标签水平居中方法总结 margin :0 auto
如果需要让div p h(大盒子)水平居中?
可以通过margin :0 auto;实现
注意点:
1.需要让div p h (大盒子)水平居中,直接给当前元素本身设置即可
2.margin:0 auto 一般针对固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度
<!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{background-color: brown;width: 600px;height: 400px;margin: 0 auto;}</style>
</head>
<body><div></div>
</body>
</html>