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

1-1CSS基础

1-1css引入方式

1.内嵌式:

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

2.外联式:

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

3.行内式:

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

 





Document


 

  
  
    

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







Document

  
  
文本文字样式修改


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

你可能感兴趣的:(自学前端学习笔记-01CSS基础样式语法)