CSS引入方式
引入方式 | 书写位置 | 作用范围 | 使用场景 |
内嵌式 | css写在style标签中 | 当前页面 | 小案例 |
外联式 | CSS写在一个单独的.css文件中,需要通过link标签在网页中引入 | 多个页面 | 项目中 |
行内式 | css写在标签的style属性中 | 当前标签 | 配合js使用 |
基础选择器
1、标签选择器--以标签名命名的选择器,所有的这个标签都生效
2、类选择器
结构:.类名{ css属性名:属性值;}
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式注意点:
1. 所有标签上都有class属性,class属性的属性值称为类名(类似于名字)2.类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头3.一个标签可以同时有多个类名,类名之间以空格隔开
4.类名可以重复,一个类选择器可以同时选中多个标签
div用来网页布局,一个页面可能用无数次,原则:如果使用div ,尽量使用类名控制样式
3、id选择器
结构: #id属性值{ css属性名︰属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式注意点:
- 所有标签上都有id属性
- id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的!
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
4、通配符选择器
结构: *{ css属性名:属性值;}
作用:找到页面中所有的标签,设置样式注意点:
1.开发中使用极少,只会在极特殊情况下才会用到
2.在基础班小页面中可能会用于去除标签默认的margin和padding
字体和文本样式
1.字体样式
1.字体大小: font-size
属性名: font-size取值:数字+px
注意点:
- 谷歌浏览器默认文字大小是16px
- 单位需要设置,否则无效
2.字体粗细:font-weight
正常 | normal |
加粗 | bold |
3.字体样式: font-style
正常 | normal |
加粗 | italic |
4.字体类型: font-family
无衬线字体(sans-serif)
- 特点:文字笔画粗细均匀,并且首尾无装饰
- 场景:网页中大多采用无衬线字体
- 常见该系列字体:黑体、Arial
衬线字体(serif)
- 特点:文字笔画粗细不均,并且首尾有笔锋装饰
- 场景:报刊书籍中应用广泛
- 常见该系列字体:宋体、Times New Roman
等宽字体(monospace)
- 特点:每个字母或文字的宽度相等
- 场景:一般用于程序代码编写,有利于代码的阅读和编写
- 常见该系列字体:Consolas、fira code
注意点:如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖),写在最下面的会生效
属性名: font(复合属性)
取值:font : style weight size family;
省略要求:
只能省略前两个,如果省略了相当于设置了默认值
注意点:如果需要同时设置单独和连写形式
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
文本缩进
属性名:text-indent
取值:px/em(推荐em,1em =当前标签的font-size的大小)
水平对齐
属性名: text-align
属性值 | 效果 |
left | 左对齐 |
center | 居中对齐 |
right | 右对齐 |
text-align : center 能使文本、span标签、a标签、input标签、img标签居中
文本修饰
属性名: text-decoration
取值:
属性值 | 效果 |
underline | 下划线 |
line-through | 删除线 |
overline | 上划线 |
none | 无装饰线 |
行高属性名:line-height
取值:
- 数字+px
- 倍数:(当前标签front-size的倍数)
应用:
- 让单行文本垂直居中可以设置line-height :文字父元素高度
- 网页精准布局时,会设置line-height取消上下间距
注意点:如果同时设置了行高和font连写,注意覆盖问题font : style weight size/line-height family ;
标签水平居中方法总结margin : 0 auto
如果需要让div、p、h (大盒子)水平居中?
- 可以通过margin : 0 auto ;实现
注意点:
1.如果需要让div、p、h (大盒子)水平居中,直接给当前元素本身设置即可
2. margin: 0 auto一般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度
text-align:center 文字居中,不是标签居中
盒子内减模式:box-sizing:border-box;
垂直布局中的块级元素,上下的margin会合并并保留最大值,只需要给一个盒子设置margin就好
互相嵌套的块级元素,子元素的margin-top会作用在父元素之上,导致父元素随之一起变化
解决办法:
- 给父元素设置border-top或者padding-top(分隔父子元素的margin-top)
- 给父元素设置overflow: hidden
- 转换成行内块元素
- 设置浮动
margin和padding无法改变行内标签的垂直位置