行内引用
<div style="属性名1:属性值1;属性名2:属性值2;">
引 入style对象 若干个属性 同一个属性名字的属性会覆盖
缺点 1:代码冗余
2:不符合w3c的提倡,后期代码维护困难 w3c 提倡网页 结构和样式相分离
用处:1:相同样式的元素的特殊样式
2:后期JS获取计算属性
文本内部样式表
缺点:1:没有彻底实现样式和结构相分离 2:难维护
用处:修改不同于公共样式文件里的结构文件
css选择器 fun:挑选元素 加css属性
基础css选择器
1:标签选择器(通过元素标签名字选择元素)—>
css
标签名字 {
属性名1:属性值1;
属性名2: 属性值2;
```
width:200px;
width:300px;
相同属性 不要写多次 会覆盖
类选择器
.类名 {
属性名1:属性值1;
属性名2: 属性值2;
…
}
.a {
width:100px;
height;100px;
border:1px solid red;
}
.b {
background-color:blue;
}
id选择器
·```
id其实就是一个唯一识别 id挑选的元素就是一个#id名 {
属性名1:属性值1;
属性名2: 属性值2;
…
}
#first {
w:200px;
h:200px;
bgc:red;
}
全局选择器
* {
属性名1:属性值1;
属性名2: 属性值2;
....
}
* 挑选包括body 在内的所有元素 (body 和他的孩子们)
选择器权重总结
*全局 | 标签选择器 |
---|---|
0 | 1 |
class | id |
– | – |
10 | 100 |
3:文本外部引入
1: 创建一个css文件 结构文件和样式文件名字要对应 index.html 首页 index.css
2: 结构文件里通过link进行外部引入
<link rel="stylesheet" href=".css文件路径"> 样式都要写在头部
字体属性
1: 字体家族
font-family: “微软雅黑”,“楷体”,“宋体”,tahoma,arial,‘Hiragino Sans GB’,’\5b8b\4f53’,
sans-serif;
\5b8b\4f53 宋体 simsun 微软雅黑 “Mcrosoft YaHei”
```
- 字体是中文的要加双引号
- 字体是英文的 字体是一个英文单词 中间没有空格 不用加" " 有空格的加""
2: 字体大小()
px 20px
em 相对单位 相对父元素的字体单位
rem 相对单位 相对根标签的字体单位 html
3:字体颜色
4:字体形态
斜体 /正体
font-style: normal 正 / italic 斜; em i
5:字体粗细** 100-900 400是正常 >400粗 <400细
font-weight: 400; 800 900最粗
6:行高
line-height:盒子高 垂直居中;
复合写法:
font: font-style font-weight font-size/line-height font-family ; 必须按照顺序写
font: 12px/1.5 "Microsoft YaHei"; 1.5 字体的行高
背景属性
插入图片 : img src=“路径”
背景图片的方式
background:
1:背景颜色 background-color:
2:背景图路径 background-image: url(路径);
3:背景是否平铺 background-repeat: repeat-x 平铺x轴/repeat-y 平铺y轴/no-repeat 不平铺/repeat(默认值)
4:背景图片的位置 background-position: 水平位置+x /-x 垂直位置+y /-y;
+xpx 向右走
-xpx 向左走
+ypx 向下走
-ypx 向上走
(2)设置 % background-position: 20% 30%;
20% : 不是背景盒子的宽度的20%!!! 是(背景盒子宽度-图片的宽度)*20%
30% : 不是背景盒子的高度的30%!!! 是(背景盒子高度-图片的高度)*30%
(3)设置方位 background-position: top /left /right/bottom/center
background-position:center center;
当你只写一个值得时候另外一个值是center
background-attachment: scroll随滚动条滚动(默认值) / fixed 不随滚动条滚动;
当你设置fixed值时 背景图片的参考位置从背景盒子左上角变到body左上角