开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情
CSS(层叠样式表)
html --> 写一些东西出来给别人看
css --> 找到html写的东西.并给它加特效
1.怎么找?
2.加什么?
css -- 层叠样式表 --> 用来对网页进行排版,美化外观设置.性能优化
文本 -- 字体,大小,对齐方向,颜色,缩进
图片 -- 宽高 边框 颜色 透明度
html: 身体 css:化妆品
网页文件的后缀: .html
样式表文件文件的后缀: .css
css注释写法 /* 注释内容 */
css选择器
css的工作分为两步: 1.找到元素 2.加样式
选择器就是找到模板的一众手段.通过选择器找到一个指定的标签元素
1.标签选择器: 选中一个标签(选中一个页面中所有该标签)
语法格式
标签名{
属性:值;
属性:值;
}
p{
color: #096;
font-size: 70px;
}
2.id选择器: 给标签设置id编号.然后可以通过#id名的方式找到这个标签. id类似于身份证,是唯一的
语法格式
<标签名 id='id名'>
#id名{
}
#kylin{
color: #6cf;
font-size: 30px;
}
3.类选择器(class) 给标签设置class类型.然后就可以通过.类名的方式找到对应的标签. 类可以有多个.id只能有一个
语法格式
<标签名 class='类名'>
.类名{
属性:值;
属性:值;
}
.class1124{
color: gold;
text-align: center;
}
4.通配符选择器(*) 通配符选择器用*号表示.表示选中网页里的所有元素
语法格式
*{
属性:值;
属性:值;
}
*{
color: red;
font-size:26px;
}
css样式的三种写法
style:样式
1.内部样式表 --> 把样式表写在当前页面里的style标签中. style写在head标签里
语法格式:
<head>
<style>
css代码
</style>
</head>
2.外部样式表 --> 把css样式写在一个专门.css文件里.需要用的时候就link导入.类似于python的模块
写好css文件后.在head中通过link标签来读取
<link rel='stylesheet' href='css文件'>
3.行内样式表 -- 通过style属性,把样式直接写在标签里
<标签名 style='属性1:值1; 属性2:值2'>
样式表优先级为就近原则 -- 行内样式 > 内部样式/外部样式 (谁距离标签近.听谁的)
样式表总结:
1.行内样式表:
优点: 写起来比较方便,权重比较高
缺点: 灵活性不强
频率: 较少
范围: 单个标签
2.内部样式表
优点: 写起来方便,在单个页面时比较灵活
缺点: 可复用性不强
频率: 较多(学习阶段用它为主)
范围: 整个网页
3.外部样式表
优点: 可复用性高
缺点: 需要导入
频率: 最高(正式开发时.大部分是用link)
范围: 整个网站
div盒子标签(division)
div本身是没有含义.它一般是作为划分区域的标签.它是一个很单纯的标签,可塑性强.一般用来做容器.所以称为盒子.把对应的内容放到div盒子里 --> 分割区域.div本身是没有宽高/颜色属性的
width: 宽度
height: 高度
<div> 内容 </div>
快速创建一个id为XX的盒子 #XXX
快速创建一个class为XX的盒子 .XXX
文本样式(font)
span标签作为一个小透明.自身就是装文本,但是没什么突出.不会换行,不会加粗等东西.所以比较纯粹.适合用加样式
文本样式:
1.color: 颜色(https://www.sioe.cn/yingyong/yanse-rgb-16/)
color: blue;
color: #096;
颜色有三种写法:
1.直接写预设好的颜色单词
red green pink blue
2.用十六进制颜色
#096
#6cf
3.用rgb值设置颜色
rgb(255,255,255)
rgb(0,0,0)
rgb(123,70,200)
2.font-size: 字体大小 (px像素 em字符单位)
font-size: 70px;
3.text-indent: 文字缩进
text-indent: 2em; 缩进两个字
4.font-family: 设置字体
font-family: '字体值';
5.font-weight: 设置字体粗细值
font-weight: 1000;
6.font-style: 字体样式(倾斜)
font-style:italic;
7.line-height: 设置字体的上下位置
line-height: 30px;
8.text-align: 设置文本对齐
text-align :center;
left左 center中间 right右
9.text-decoration: 设置文本样式(下划线啥的)
text-decoration: underline; 下划线
none; 默认啥都没有
overline; 上划线
line-through;
背景样式(background)
background:背景
background-color: 设置背景颜色
background-color: #096;
background-image: 设置背景图片
background-image: url(图片)
background-position : 设置图片位置
left左 center中 right右
top上 bottom下
background-size : 设置背景大小
background-size :cover; 等比例缩放
background-repeat: 设置背景图片是否重复
background-repeat: no-repeat; 不重复
