css样式

目录

1.css简介

2.css样式

       常用选择器：

3.书写位置

4.字体样式

5.文本样式

---

1.css简介

CSS也叫做层叠样式表，它是一种定义样式结构如字体、颜色、位置等的语言，对 HTML 代码进行美化。

 

 

 2.css样式

常用选择器

1、 元素选择器

语法：标签名{}

 作用：选中对应标签包裹的内容

 例子：h1{},h2{},p{},div{},span{}

2、id选择器

语法：#id属性值{}

      作用：选中对应的id属性值的内容

      例子：#p1{},#pp{},#abc{}

 

3、class选择器

语法：.class属性值{}

      作用：选中对应class属性值的内容

      例子：.pp{},.p1{}

 

4、通配选择器

语法：*{}

      作用：选中页面中所有的标签

 3.书写位置

第一种方式：内联样式/行内样式

写在开始标签里面，写一个style属性，讲一组一组的样式写在style属性值里面

          color: red;  样式名:样式值;

          可以写多组样式，但一定要用;隔开

          缺点：

           1、结构和表现耦合了

           2、不容易修改

          注意：

            尽量少用

第二钟方式：内部样式表

写在head标签内部，写一个子元素，style标签，

      通过选择器选中对应的要设置的元素/标签，在{}里设置一组一组样式

      也可以写多组样式，也需要用;隔开

 缺点：

       不方便复用

第三种方式：外部样式表

在html文件的外部新建一个.css文件，在css文件里写样式

         然后通过在head标签内部写子标签link标签，

            将html文件和css文件联系在一起

          link标签里有href属性，在href里写引入css文件的路径

注意：这种方式推荐使用

 4字体样式

字体样式

字体类型

在CSS中使用 font-family 属性来设置文本的字体类型

字体大小

使用 font-size 来改变文本大小

单位需要使用 px

字体粗细

font-weight 可以设置字体的粗细，除了默认值以外还有bold、bolder、lighter 以及自定义粗细

font 属性

font 简写属性在一个声明中设置所有字体属性

font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。

5.文本样式

文本样式

 

文本颜色

文本颜色使用color属性来设置

文本对齐方式

text-align 属性规定元素中的文本的水平对齐方式