JavaWeb-一篇文章带你入门CSS(笔记+案列)

雨点打透心脏的1/2处 2023-09-27 21:54 101阅读 0赞

#### 目录 ####

*   *  CSS是什么
     *   *  基本语法
     *  CSS的引入方式
     *   *  内部样式表
         *  行内样式表
         *  外部样式表
     *  选择器
     *   *  基础选择器
         *   *  标签选择器
             *  类选择器
             *  id选择器
             *  通配符选择器
         *  复合选择器
         *   *  后代选择器
             *  子选择器
     *  常用元素属性
     *   *  字体属性
         *  文本属性
         *  背景属性
         *  圆角矩形
     *  元素的显示模式
     *   *  块级元素
         *  行内元素
     *  我们可以使用display属性来修改元素的显示模式
     *   *  推荐网站

### CSS是什么 ###

CSS 是层叠样式表 (Cascading Style Sheets) 的简称,CSS 描述了 如何在屏幕、纸张或其他媒体上显示 HTML 元素.

> CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

#### 基本语法 ####

选择器 {
        一条或者N条声明}

选择器: 指定修改的是谁  
声明:决定修改什么  
  
例如:

<style>
            h1 {
          
            /* 设置字体颜色 */
            color: green;
            }
        </style>
         <h1> 要想生活过得去 </h1>

![在这里插入图片描述][e29d24573108492ebbd08a5195c35288.png]

### CSS的引入方式 ###

#### 内部样式表 ####

写在 style 标签中. 嵌入到 html 内部,理论上来说 style 放到 html 的哪里都行,但是一般都是放到 head 标签中的.  
上面举的例子就是使用这种内部样式表引入方式.

#### 行内样式表 ####

通过 style 属性, 来指定某个标签的样式,当然也就只生效于这个标签.

<h1 style="color: royalblue;"> 要想生活过得去 </h1>

![在这里插入图片描述][761331631bc846d5b3ba5d6d937cd2cc.png]

这种写法优先级较高,会覆盖其他引入方式的写法  
例如:

![在这里插入图片描述][877218b8c577401699aa1be1b5f2b92d.png]

#### 外部样式表 ####

1.  创建一个CSS文件,在文件里写入需要修改的样式.
2.  在HTML中通过link标签来进行CSS文件的引入

### 选择器 ###

> 选择器是用来选中页面中指定的标签元素来进行属性的设置

#### 基础选择器 ####

##### 标签选择器 #####

语法: 标签名 \{ \}

![在这里插入图片描述][0c8a91bc5732458b85fe43f10c3b92a6.png]  
优缺点:  
能快速为同一类型的标签都选择出来.  
但是不能差异化选择.

##### 类选择器 #####

语法: .类名 \{ \}

![在这里插入图片描述][1d282864fac946e495d0aafb012a3c48.png]

优缺点:

*  差异化表示不同的标签
 *  可以让多个html标签被同一个css修改属性.

##### id选择器 #####

语法: \#id \{ \}

![在这里插入图片描述][0139fe1cc1e042e3b069b31c5b6d6cf8.png]

注意:

*  CSS 中使用 \# 开头表示 id 选择器
 *  **id 是唯一的**, 不能被多个标签使用

##### 通配符选择器 #####

语法: \* \{ \}

![在这里插入图片描述][24b918e1887d4177a1ea137b04251d7c.png]

#### 复合选择器 ####

##### 后代选择器 #####

语法: 元素1 元素2 \{ \}

> 元素之间使用空格分开  
> 元素二是元素一的后代,可以是子元素,也可以是孙元素等等.  
> 可以是任意基础选择器之间的组合

![在这里插入图片描述][999700a42ad044dd91bacf995cacbfca.png]

##### 子选择器 #####

语法: 元素1>元素2 \{ \}

> 与后代选择器一样,但元素2只能是元素1的子标签

![在这里插入图片描述][f76d7643da1747b890fc18f5cab88ced.png]

### 常用元素属性 ###

#### 字体属性 ####

*  设置字体

![在这里插入图片描述][830d59c085bc4beeb4736d9f8533e799.png]

> 字体名称可以用中文, 但是不建议  
> 如果字体名有空格, 使用引号包裹  
> 如果所使用字体找不到就会使用默认字体

*  字体大小

![在这里插入图片描述][1a31941a23294482ab2ab0c729c05154.png]

注意不要忘记字体大小单位px

*  字体粗细

![在这里插入图片描述][19e4d9f7ff734ffeaf84a3cc0fdbc819.png]

> 使用数字表示粗细  
> 取值范围是 100 -> 900

*  文字样式

![在这里插入图片描述][293ed8c997154de2aa5bf163a02f3a33.png]

#### 文本属性 ####

*  文本颜色

> 在计算机中我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果,针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).  
> 数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色  
> 设置文本颜色我们有三种设置方式分别为:

1.  预定义的颜色值(比如直接写出颜色所对应的单纯)
2.  十六进制形式 (\#f0f0f0 )
3.  rgb(255, 255, 255)

*  文本对齐  
    用属性 text-align 来进行控制

1.  text-align:center -居中对齐
2.  text-align:eft -左对齐
3.  text-align:right -右对齐

*  文本缩进  
    **用属性 text-indent 来进行控制**  
    text-indent: 值px ;  
    单位可以使用 px 或者 em(em为当前文字的大小)
 *  文本装饰  
    **使用属性text-decoration 来进行修饰**

1.  text-decoration : underline -下划线
2.  text-decoration : none -什么都没有,通常用来给链接标签进行去下划线处理

#### 背景属性 ####

*  背景颜色  
    使用background-color属性  
    background-color: 指定颜色

![在这里插入图片描述][7d9df1beaa6848a0ab9ad446aabff13b.png]

*  背景图片  
    使用background-image属性来进行修改  
    background-image: url(…);

![在这里插入图片描述][96f0b635953a4a35b3a3aae3bf0249e2.png]

*  背景平铺  
    背景平铺通过background-repeat属性来进行修改  
    background-repeat: \[平铺方式\]

1.  repeat: 平铺
2.  no-repeat: 不平铺
3.  repeat-x: 水平平铺
4.  repeat-y: 垂直平铺

#### 圆角矩形 ####

通过 border-radius 属性进行修改  
border-radius:长度;

*  生成圆形  
    **长度** 为矩形的内切圆半径,所以要生成圆形只需要让长度为正方形的一半即可.

![在这里插入图片描述][f5aedc0d68de4ee9a2517178468fab9f.png]

*  生成圆角矩形  
    生成圆角矩形也很简单,将 border-radius 的属性值设为矩形高度的一半即可

![在这里插入图片描述][2019c4d076d9467aa61c6151c06c55e1.png]

### 元素的显示模式 ###

#### 块级元素 ####

> 常见的块级元素都有:h1 - h6 , p ,div , ul ,ol ,li 等

![在这里插入图片描述][e9c2293df4de41fabc76c903a244b71b.png]  
由上述结果可见块级元素是独占一行的(代码中并没有使用换行).

特点:

1.  独占一行.
2.  高度, 宽度, 内外边距, 行高都可以控制.
3.  不设置宽度的话,默认跟父级元素同宽.

#### 行内元素 ####

> 常见的行内元素: a , b , i , s , u , span

![在这里插入图片描述][441e217fc0c0461ebebabd120ec63685.png]  
我们可以发现设置高度, 宽度, 行高无效.

特点:

1.  不独占一行,一行可以显示多个.
2.  设置高度, 宽度, 行高无效.
3.  左右外边距有效,内边距有效.

### 我们可以使用display属性来修改元素的显示模式 ###

*  display: block 改为块级元素
 *  display: inline 改为行内元素

#### 推荐网站 ####

如果还想了解更多的css知识可进入[链接网站继续进行学习][Link 1].

[e29d24573108492ebbd08a5195c35288.png]: https://img-blog.csdnimg.cn/e29d24573108492ebbd08a5195c35288.png
[761331631bc846d5b3ba5d6d937cd2cc.png]: https://img-blog.csdnimg.cn/761331631bc846d5b3ba5d6d937cd2cc.png
[877218b8c577401699aa1be1b5f2b92d.png]: https://img-blog.csdnimg.cn/877218b8c577401699aa1be1b5f2b92d.png
[0c8a91bc5732458b85fe43f10c3b92a6.png]: https://img-blog.csdnimg.cn/0c8a91bc5732458b85fe43f10c3b92a6.png
[1d282864fac946e495d0aafb012a3c48.png]: https://img-blog.csdnimg.cn/1d282864fac946e495d0aafb012a3c48.png
[0139fe1cc1e042e3b069b31c5b6d6cf8.png]: https://img-blog.csdnimg.cn/0139fe1cc1e042e3b069b31c5b6d6cf8.png
[24b918e1887d4177a1ea137b04251d7c.png]: https://img-blog.csdnimg.cn/24b918e1887d4177a1ea137b04251d7c.png
[999700a42ad044dd91bacf995cacbfca.png]: https://img-blog.csdnimg.cn/999700a42ad044dd91bacf995cacbfca.png
[f76d7643da1747b890fc18f5cab88ced.png]: https://img-blog.csdnimg.cn/f76d7643da1747b890fc18f5cab88ced.png
[830d59c085bc4beeb4736d9f8533e799.png]: https://img-blog.csdnimg.cn/830d59c085bc4beeb4736d9f8533e799.png
[1a31941a23294482ab2ab0c729c05154.png]: https://img-blog.csdnimg.cn/1a31941a23294482ab2ab0c729c05154.png
[19e4d9f7ff734ffeaf84a3cc0fdbc819.png]: https://img-blog.csdnimg.cn/19e4d9f7ff734ffeaf84a3cc0fdbc819.png
[293ed8c997154de2aa5bf163a02f3a33.png]: https://img-blog.csdnimg.cn/293ed8c997154de2aa5bf163a02f3a33.png
[7d9df1beaa6848a0ab9ad446aabff13b.png]: https://img-blog.csdnimg.cn/7d9df1beaa6848a0ab9ad446aabff13b.png
[96f0b635953a4a35b3a3aae3bf0249e2.png]: https://img-blog.csdnimg.cn/96f0b635953a4a35b3a3aae3bf0249e2.png
[f5aedc0d68de4ee9a2517178468fab9f.png]: https://img-blog.csdnimg.cn/f5aedc0d68de4ee9a2517178468fab9f.png
[2019c4d076d9467aa61c6151c06c55e1.png]: https://img-blog.csdnimg.cn/2019c4d076d9467aa61c6151c06c55e1.png
[e9c2293df4de41fabc76c903a244b71b.png]: https://img-blog.csdnimg.cn/e9c2293df4de41fabc76c903a244b71b.png
[441e217fc0c0461ebebabd120ec63685.png]: https://img-blog.csdnimg.cn/441e217fc0c0461ebebabd120ec63685.png
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web