html标签样式

目录

1、内联样式

2、内部样式《标签选择器》

3、外部样式

4、html引用css

5、《class选择器》

6、《id选择器》

7、《群组选择器/并集标签》

8、《兄弟选择器》

9、《相邻标签》 

10、子代选择器

11、《后代选择器》

12、class相同：

13、伪装选择器

14、focus伪类选择器

15、字体样式

16、文本样式

17、文字内容超出省略

18、块级元素

19、行内元素

20、行内块元素

21、显示形式转换

22、背景

23、背景图片位置

24、固定背景

25、背景复合写法

---

优先级：内联样式 > 内部样式 > 外部样式

在内设置样式

1、内联样式：写在标签里面

    
人生苦短，我用python

2、内部样式《标签选择器》：

功能：同步设置多个标签样式

    
    

    


    
人的一生为什么要努力？因为最痛苦的事，不是失败，是我本可以

标签选择器同步设置多个标签

3、外部样式：新建css样式表，html用Link方法引用

css样式表：

4、html引用css

5、《class选择器》：先定义类（. ABC）-标签内引用类

功能：针对单个标签设置样式，可被多个标签引用

 输出：

 6、《id选择器》：定义id（#ABC） -标签内通过id属性引用（id='ABC'）

功能：具有唯一性（引用多个会语法报错）

 7、《群组选择器/并集标签》：标签1，.类名{background-color：背景颜色,  height：高度,width：宽度}

功能：多种标签、自定义类等同时设置样式

    
    
    


    
熊大
    
熊二
    

        
第一个li
        
第二个li
        
第三个li
    

 8、《兄弟选择器》：（标签1~标签2）

功能：给标签1后面的所有同级标签2设置样式。

    


    
我是第一个div盒子
    

        
我是第一个p盒子
    
    
第一个p标签
    
第二个p标签
    
第三个p标签

兄弟选择器输出：

9、《相邻标签》 ：（.类名）+标签（必须是相邻且从上往下找）

功能：给小李邻居老王设置样式

    
    
    


    
我是第一个div盒子
    

        我是第一个span盒子
    
    
第一个p标签
    
第二个p标签
    
第三个p标签

相邻标签输出：

 10、子代选择器：标签1>标签2

功能：给dic标签内的p标签设置样式

子代选择器输出：

                                                            

11、《后代选择器》

功能：仅给内嵌标签设置样式，不限层数

    


    
我是第一个div盒子
    

        我是第一个span盒子
        

            
我是内嵌的p标签
            
                
我也是内嵌的p标签
            
        
    
    
第一个p标签
    
第二个p标签
    
第三个p标签

后代选择器输出：

 12、class相同：需要加工的标签.类名{...样式....}

功能：当拥有相同类的不同标签，针对某个标签需加样式时

    


    
我是一个div盒子
    我是一个span盒子
    
我是一个p标签

class相同输出：

13、伪装选择器：链接标签a：link{color:yellow}

• link 超链接点击之前
• visited 链接被访问过之后

功能：作用于链接标签当鼠标移动标签时触发...

设置未被点击的时字体颜色：a：link{color:yellow}

设置已被点击的链接字体颜色：a:visited{color: brown}

设置鼠标悬停的字体颜色：a:hover{color: yellow;}

设置鼠标点击未释放字体颜色:a:active{color: blue;}

    
    
    


    百度一下

14、focus伪类选择器：表单标签：focus{样式}

功能：作用于表单标签，当鼠标悬停在表单时触发

focus伪类选择器输出：当鼠标悬停在表单时背景色为pink

15、字体样式

    
    
    


    
这是第一个div盒子
    
这是第一个div盒子
    
这是第一个div盒子

16、文本样式

    


    
如果这世界上真有奇迹，那只是努力的另一个名字
    
看似不起波澜的日复一日，会突然在某一天让人看到坚持的意义
    
hello my name is mochuan
    
nice to meet you我是糖醋人鱼
    
因为足够努力，才会显得毫不费力

17、文字内容超出省略

    


    
上班累吧，总不能不上吧，感情再假，总不能不碰吧，家再远，总不能不回吧。
        我的意思是：人生这道选择题怎么选都会有遗憾的，不妨大胆一点，反正我们都
        不能活着离开这个世界，大胆一点，勇敢的去尝试。人生说到底，活的是一种心
        态，生活的刁难，并不是要你变得气急败坏，而是要你变得更加从容，未来还长，
        不必慌张，愿我们都能平心静气的面对生活中的每个选择，在稳稳的努力中收获
        稳稳的幸福。
    

18、块级元素

块级元素：h1~h6 div p ol ul li 可以设置宽高，独占一行

19、行内元素

行内元素： span 、a、  em、 del、 ins，行可以有多个

1、宽高设置是无效的，默认宽度是本身内容的宽度

2、行内元素只能放文本或者其他行内元素

3、a标签里面可以放块级标签

20、行内块元素

img  input td 有块级元素特点，也有行内元素特点

21、显示形式转换

行内元素转换为块级元素....块级→行内...行内→行内块

    
    
    


我是空链接
我是块级元素
我是行内元素

22、背景

23、背景图片位置

background-position(接收两个参数)：x轴位置 y轴位置

24、固定背景

25、背景复合写法

/*背景，不平铺，固定  （无顺序）*/
div{
background: url(../images/girl.png) no-repeat fixed}

整体设置样式