【Java Web】CSS

目录

1.CSS(Cascading Style Sheets) 层叠样式表

2.标签

1.注释

2.三种书写样式

        1.内部样式    

        2.内联样式

        3.外部样式

3.CSS选择器

（1）标签选择器

（2）类选择器

（3）ID选择器

复合选择器 

（5）后代选择器

（6）子选择器 

（7）并集选择器

（8）伪类选择器 (复合选择器的特殊用法)

 4.CSS常用属性

1.字体属性  

2.文本属性

---

1.CSS(Cascading Style Sheets) 层叠样式表

2.标签

1.注释

/*   注释内容 */

2.三种书写样式

        1.内部样式

使用sytle标签，直接把CSS写到html文件中的

此时的style标签可以放到任何位置，常放到head标签里。需要放在style里

    例如：

         

        2.内联样式

使用sytle属性，针对指定的元素设置样式。(此时不需要写选择器，直接写属性键值对)，这个样式只针对当前元素生效，通常放到body标签里。需要放在style里。

    

        这是针对当前p标签里的内容的修饰
    

        3.外部样式

把CSS代码单独作为一个 .css 文件，再通过 link 属性，让 html 引入该 css 文件。实际开发过程中，以这种为主。

3.CSS选择器

（1）标签选择器

样式:

我是p标签里的内容
我是div标签里的内容
    
    

（2）类选择器

定义类，需要使用.开头

引用这个类的时候，通过 class 属性 = "类名" 即可，不需要带点。

一个类，可以被一个元素引用，也可以被多个元素引用

一个元素可以引用一个类，也可以引用多个类

样式：

    

        这是one类的div
    

    

        这是two类的div
    

    

        这是three类的div
    

       

（3）ID选择器

html页面中的每个元素，都是可以设置成一个唯一的ID的，作为元素的身份标识。

当元素有了ID之后，就可以通过ID来选中对应的元素了。

类选择器是可以让多个元素应用到同一个类的。

而ID选择器，则只能针对唯一的元素生效，且一个页面里的，只能有唯一的ID。

定义ID，需要使用#开头

引用这个id的时候，通过 id  = "id名" 即可，不需要带#。

    

    

        这是id="one"的div标签
    
    

        这是id="two"的div标签
    
    

        这是id="three"的div标签
    

复合选择器 

（5）后代选择器

就是把多个简单的基础选择器组合一下（可以是标签，类，id，选择器的任意组合）

例如，li只要是ul的后代即可，包含后代的后代。

              普通标签                                  类                                             ID

（6）子选择器 

也是把多个简单的基础选择器组合一下（可以是标签，类，id，选择器的任意组合）

与后代选择器不同的是，子选择器只是匹配子元素，而不匹配子元素的子元素。

选择器1>选择器2 {   注意大于号

        属性...

}
 

                        后代选择器                                                    子选择器

       

                                              

 

（7）并集选择器

即针对多组选择器使用同样的样式

选择器1，选择器2 {

        属性....

}

（8）伪类选择器 (复合选择器的特殊用法)

前面的选择器是选中某个元素。

伪类选择器是选中某个元素的某个特定状态。

如：  hover   鼠标悬停时的状态

         active   鼠标按下时的状态

 

录制_2023_09_23_17_39_04_643

 4.CSS常用属性

     包括大小，位置，颜色，形状，边距，边框，特殊滤镜，过渡效果，动画等等。

1.字体属性  

      （1） 设置字体家族 font-family："微软雅黑";    当前使用哪种字体来显示如（微软雅黑，宋体，黑体，华文行楷...)

    
    
这是一个div标签
    
这是一个div标签
    
这是一个div标签
    
这是一个div标签

     （2） 设置字体大小 font-size: 40px;   40px即40像素。 

     （3）设置字体粗细 font-weight: bolder;  使用单词和数字都可以设置。

 （4）设置文字倾斜 font-sytle: italic;    取消文字倾斜 font-style: normal; 

2.文本属性

RGB   

color: rgb(0,0,0);