自学前端学习笔记-01CSS基础样式语法

1-1CSS基础

1-1css引入方式

1.内嵌式：

CSS写在style标签中
提示：syle标签虽然可以写在页面任意位置，但是通常约定写在head标签中

2.外联式：

CSS写在一个单独的.css文件中
提示：需要通过ink标签在网页中入

3.行内式：

CSS写在标签的style属性中
提示：基础班不推荐使用，之后会配合js使用

1-2标签选择器

1.标签选择器

标签选择器结构：标签名{cSs属性名：属性值；}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
标签选择器选择的是一类标签，而不是单独某一个
标签选择器无论嵌套关系有多深，都能找到对应的标签

2.类选择器

结构：.类名{css属性名：属性值；}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头一个标签可以同时有多个类名，
类名之间以空格隔开类名可以重复，一个类选择器可以同时选中多个标签

3.id选择器

结构：#id属性值{css属性名：属性值：}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的。不可重复的！
一个标签上只能与一个id属性值
一个id选择器只能选中一个标签
补充“类与id的区别
class类名与id属性值的区别
class类名相当于姓名，可以重复，一个标签可以同时有多个class
类名id属性值相当于身份证号码，不可重复，一个标签只能有一个d属性值
类选择器与id选择器的区别类选择器以.开头id选择器以#开头
实际开发的情况.类选择器用的最多id一般配合js使用，除非特殊情况，否侧不要使用id设置样式实际开发中会遇到冗余代码的抽取（可以将一些公共的代码抽取到一个公共的类中去）

4.通配符选择器

结构：*{css属性名：属性值；}
作用：找到页面中所有的标签，设置样式注意点：
开发中使用极少，只会在极特殊情况下才会用到
在基础班小页面中可能会用于去除标签默认的margin和padding

标签选择器
div{
width: 200px;
height: 200px;
background-color: #ccc;
}
类选择器
.div{
width: 200px;
height: 200px;
background-color: #ccc;
}
id选择器
#div{
width: 200px;
height: 200px;
background-color: #333;
}
通配符选择器
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

1-3字体文本样式

1.字体大小

属性名：font-size
取值：数字+px注意点：
谷歌浏览器默认文字大小是16px
单位需要设置，否则无效

2.字体粗细

属性名：font-weight
关键词

正常	normal
加粗	bold

纯数字"100~900之间的整百数

正常	400
加粗	700

3.字体样式(是否倾斜)

属性名	font-style
正常(默认)	normal
倾斜	italic

1-4字体系列

属性名:font-family

1-5字体font相关属性的连写

属性名	font
书写顺序:	font:style weight size family(记住swsf)

2-1文本缩进

属性名	text-indent
数字+px
数字+em（推荐1em=当前标题的font-size的大小）

2-2文本水平居中

属性名	text-align
取值
属性值	效果
left	左对齐
center	居中对齐
right	右对齐

扩展

text align：center能让那些元素水平居中
1.文本 2.span标签 3.input、img标签

2-3文本修饰

属性名	text-decoration
取值
underline	下划线（常用）
line-through	删除线（不常用）
overline	上划线（几乎不用）
none	无装饰
注意：开发中会清除默认样式使用text decoration：none	清除a标签默认的下划线

2-4行高

作用	控制一行的上下行间距
属性名	line-height
取值
数字+px倍数（当前标签font-size的倍数）

应用：
**1.让单行文本垂直居中可以设置ine-height：文字父元素高度
2.网页精准布局时，会设置ine-height：1可以取消上下间距行高与font连写的注意点：
如果同时设置了行高和font连写，注意覆盖问题 font: style weight size/line-height family

  
  

        文字文本样式修改

文本文字样式修改

---

Chrome开发者工具脑图

打开开发者工具的两种路径：
鼠标右键➡检查➡
电脑安键F12快捷键

image.png

2-1CSS进阶

1-1选择器进阶

选择器	作用	格式	实例
后代选择器	找后代	选择器之间用空格分离	.header .nav{css样式}
子代选择器	找儿子	选择器之间用>分离	.header>.nav{css样式}
并集选择器	找同时满足多个选择器的元素	选择器之间紧挨着	ullia{css样式}
hover伪类选择器	选中鼠标悬停在元素上的状态	:hover	a:hover{css样式}

2-1背景相关属性

1.背景颜色

属性名	background-color （bgc）

2.背景图片

属性名	background-image （bgi）

3.背景平铺

属性名	background-repeat （bgr）
取值	效果
repeat	(默认值)水平垂直方向都平铺
no-repeat	不平铺(经常使用)
repeat-x	沿x轴平铺
repeat-y	沿y轴平铺

4.背景位置

image.png

5.背景连写顺序

推荐：background:color image repeat position(中间用空格分开)

6.6.1（拓展）img标签和背景图片的区别

需求：需要在网页中展示一张图片的效果？
方法一：直接写上img标签即可
img标签是一个标签，不设置宽高默认会以原尺寸显示
方法二：div标签+背景图片需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

3-1元素显示模式

1.块级元素

显示特点

1.独占一行(一行只能显示一个)
2.宽度默认是父元素的宽度,高度默认由内容撑开
3.可以设置宽度

代表标签

div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......

2.行内元素

显示特点

1.一行可以显示多个
2.宽度和高度默认又内容撑开
3.不可设置宽高

代表标签

a、span、b、u、i、s、strong、ins、em、del......

3.行内块元素

显示特点：

1.一行可以显示多个
2.可以设置宽高
代表标签：
input、textarea、button、select..

4.1元素转换

属性	效果	使用频率
display:black	转换成块级元素	较多
display:inline-black	转换成行内块元素	较多
display:inline	转换成行内元素	极少

拓展

HTML嵌套规范注意点

1.块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等.…

但是：p标签中不要嵌套div、p、h等块级元素

2.a标签内部可以嵌套任意元素

但是：a标签不能嵌套a标签

拓展2：居中方法总结

image.png