前端学习之CSS-1

目录

一、基础认知

1.写法

2.引入方式

二、基础选择器 

1.标签选择器

2.类选择器 

3.id选择器 （配合js）

 4.通配符选择器

三、字体

1.字体大小

2.字体粗细

3.字体样式（是否倾斜） 

 4.字体系列font-family

5.样式的层叠问题 

6.字体font相关属性的连写 

四、文本样式 

1.文本缩进 

2.文本水平对齐方式 

3.文本修饰 

4.行高 

 5.颜色常见取值

6.标签水平居中 

---

一、基础认知

1.写法

选择器{
    属性名：属性值;
}

注释快捷键：ctrl+/

2.引入方式

内嵌式：

        CSS写在style标签中，style标签一般写在head标签里面，title标签下面

外联式：

        CSS写在一个单独的.css文件中（需通过link标签在网页中引入）

行内式：

        CSS写在标签的style属性中（配合js使用）

二、基础选择器 

1.标签选择器

特点：对所有该标签均生效 

标签名{
    属性名：属性值;
}

2.类选择器 

.类名{
    属性名：属性值;
}

 注：①类名由数字、字母、下划线、中划线组成，但不能以数字或中划线开头 

        ②一个标签可以同时有多个类名，以空格隔开

3.id选择器 （配合js）

#id属性值{
    属性名：属性值;
}

注：①id属性值类似于身份证号，在一个页面中是唯一的，不可重复

       ②一个标签上只能有一个id属性值

       ③一个id选择器只能选中一个标签 

 

 4.通配符选择器

*{
    属性名：属性值;
}

特点：对所有标签均生效 

一般用于清除标签默认的margin和padding

三、字体

1.字体大小

p{
    font-size:30px;
}

默认字号：16px

2.字体粗细

正常：normal / 400

加粗：bold / 700

p{
    font-weight:700;
}

3.字体样式（是否倾斜） 

正常：normal

倾斜：italic 

 4.字体系列font-family

Windows默认：微软雅黑

5.样式的层叠问题 

 

 如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效

6.字体font相关属性的连写 

 

注：用空格隔开

四、文本样式 

1.文本缩进 

属性名：text-indent 

取值：①数字+px

           ②数字+em（1em=当前标签的font-size的大小）

p{
    /*首行缩进两个字的大小，默认字号16px*/
    text-indent: 32px;
    text-indent: 2em;
}

2.文本水平对齐方式 

属性名：text-align 

取值：①left ：左对齐

           ②center：居中对齐

           ③right：右对齐 

 注：text-align可以让 文本 span标签 a标签 input标签 img标签 居中

3.文本修饰 

属性名：text-decoration 

属性值	效果
underline	下划线
line-through	删除线
overline	上划线
none	无装饰线

注：none常用于取消超链接的下划线

4.行高 

属性名：line-height

取值：①数字 + px

           ②数字（当前标签font-size的倍数）

 

p{
    line-height: 50px;
    line-height: 1.5;
}

行高与font连写的注意点: 

        ①如果同时设置了行高和font连写，注意覆盖问题

        ②font : style weight size/line-height family ;

 5.颜色常见取值

属性名：color 、background-color

6.标签水平居中 

div{
    margin: 0 auto;
}