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名“>
<b id="hot">
#id{
属性:值;
属性:值;
}
#hot{
color:red;
font-size:20px;
}
3.class选择器:先给标签设置class类名/类型,然后通过.class名的方式找到改标签。class为类型,可以有多个,id只能有一个
语法格式:
<标签名 class="类名“>
<span class="money">
.类名{
属性:值;
属性:值;
}
.money{
color:gold;
font-size:30px;
}
可以给多个标签设置类名,属性会同时生效
4.通配符选择器(*):通配符选择器用*号表示,表示网页里的所有元素(正式开发不用)
语法格式:
*{
属性:值;
属性:值;
}
*{
color:6cf;
font-size:50px;
}
相对来说class用得最多
标签选择器一般是用来清除样式/设置默认样式
一个网页,我不想用a的样式/换个样式,就可以用标签选择器全选,去除
css样式的三种写法
style:样式
1.内部样式表 -->把样式写在style标签中,style标签写在head里的
语法格式:
<head>
<style>
css代码
</style>
</head>
2.外部样式表 -->把css 代码写在一个专门的.css文件里需要使用的时候用link标签导入内似与python模块
写好css文件后,在head 里用link标样式
<link rel="stylesheet" href="文件路径”>
3.行内样式表 -->通过标签属性style.直接吧样式写在标签里
<标签名 style="属性:值;属性:值‘>
样式表优先级参考就近原则
行内样式表:
优点:写起来方便
缺点:灵活性不强
内部样式表:
优点:写起来方便
缺点 :可复用性不强
外部样式表:
优点:可复用性
缺点:需要导入
div盒子标签
主要是用来做布局使用,本身没有属性,样式,含义,可以做布局使用,把对应内容写在里面
width:宽度
height:高度
<div>内容</div>
文本样式
span标签是一个文本标签,他没有特别的样式/属性,很单纯,适合用来夹文本样式
1.color:
color:blue;
color:#096;
color:rgb(70,130,200)
颜色的三种写法:
1.直接写预设好的颜色单词
gold red pink
2. 用十六进制颜色
#096 #6cf
3.用rgb来设置颜色rgb
rgb(255,255,255)#白色
rgb(0,0,0)#黑色
1.font-size:字体大小(px像素 em字符大小)
font-size:70px;
font-size:2em;
2.font-family:设置字体(宋体)
font-family:"microsoft yahei"
3.font-weight:字体粗细 100~900
font-weight:900
4.font-style:字体样式(倾斜)
font-style:italic
5.text-ident:文字缩进
text-ident:2em
6.text-align:center
7.text-decoration:设置文本样式(下划线)
text-decoration:underline
8.line-height:设置文本的上下位置
line-height:30px
背景样式
1.background-color:设置背景颜色
background-color:#096
2.background-image:设置背景图片
background-image:url(图片路径)
3.background-position:设置背景位置
left左 center中 right右 top上 bottom下
4.background-size:设置背景大小
background-size:cover#缩放
5.background-repeat:设置背景重复
background-repeat:no-repeat#背景不重复