Python 自动化（十二）CSS概述

CSS 概述

概念与理解

层叠样式表 — 也就是 CSS — 是在 HTML 之后应该学习的第二门技术。HTML 用于定义内容的结构和语义，CSS 用于设计风格和布局。比如，我们可以使用 CSS 来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。

修改页面样式

根据样式表在页面中呈现的方式不同，可以通过以下三种方式在页面中使用

 

内联样式

该样式用于某个元素属性中，借助于 style 标签属性，为当前的标签添加样式说明，格式如下：

<标签名 style="样式声名">

样式声明：由 CSS 属性和值组成

style="属性: 值;属性: 值;"

实验：css内联样式

css内联样式表就是把css代码直接写在现有的HTML标签中

• 创建一个新的 HTML 文件 myhtml9.html 文件

    
    



    CSS基本概念





    俺也一样

点击浏览器图标，查看网页效果

 选择器（很多标签如何选定）

内嵌样式

借助于 style 标签，在 HTML 文档中嵌入 CSS 样式代码，实现 CSS 样式与 HTML 标签之间的分离，格式如下：

实验：css内嵌样式

嵌入式css样式，就是可以把css样式代码写在

CSS基本概念

俺也一样

点击浏览器图标，查看网页效果

 

外链样式

外链式css样式(也可称为外联式)就是把css代码写一个单独的外链文件中，这个css样式文件以“.css”为扩展名，在内（不是在-->

CSS基本概念

俺也一样

点击浏览器图标，查看网页效果

 

CSS 选择器

作用

匹配文档中的某些标签为其应用样式，根据查找元素的方式不同，可以分为以下几类：

标签选择器	id选择器	class选择器
群组选择器	后代选择器	子代选择器
伪类选择器

标签选择器

根据标签名匹配文档中所有该标签，语法格式：

标签名 {
    属性:值;
}

实验：标签选择器

• 修改 HTML 文件 myhtml10.html 文件，将外链样式注释掉，重新修改h1的样式

    
    
    
    







CSS基本概念
俺也一样

点击浏览器图标，查看网页效果

 

ID选择器

通过 id 属性进行标签的定位，然后进行属性的修改

实验：ID 选择器

• 修改 HTML 文件 myhtml10.html 文件

    
    
    
    







CSS基本概念
俺也一样
我们不一样

点击浏览器图标，查看网页效果

 

class 选择器

根据标签的 class 属性值匹配相应的标签，class属性值可以重复使用，实现样式的复用，语法格式：

.class 类名{
    属性:值;
}

实验：class 选择器

• 修改 HTML 文件 myhtml10.html 文件

    
    
    
    







CSS基本概念
俺也一样
我们不一样

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cupiditate eos facilis natus rerum! Accusantium, aut dicta eius est laboriosam molestiae nulla numquam unde! Non omnis quos unde! Cum, odit?

点击浏览器图标，查看网页效果

 

• 使用最频繁，类选择器，可以选单个，可以选多个

后代选择器

使用后代选择器，需要在HTML页面中说明父子关系

实验：后代选择器

• 创建一个新的 HTML 文件 myhtml11.html 文件

    
    
    


    
祖父标签
        
父标签
            子标签
        
    

点击浏览器图标，查看网页效果

 

子代选择器

匹配蛮子选择器的所有直接子标签，语法格式：

selector1 > selector2 {
    属性: 值;
}

实验：子代选择器

• 修改 HTML 文件 myhtml11.html 文件

    
    
    


    

        
item1
        
item2
        
item3
    
    
祖父标签
        
父标签
            子标签
        
    

点击浏览器图标，查看网页效果

 常见标签创建方法的快捷键

伪类选择器

该类选择器可以为标签的不同状态分别设置样式，但必须与基础选择器结合使用才能生效。

分类

• :hover表示：鼠标划过时的状态
• :focus表示：焦点状态（文本框被编辑时就称为获取焦点）

使用

.c1:hover {}
.txt:focus {}

实验：伪类选择器

• 创建一个新的 HTML 文件 myhtml12.html 文件

    
    
    


    
看我看我看我

鼠标只有移动到文字上时才变色，接着修改 myhtml12.html 文件

    
    
    


    
看我看我看我

加过渡变化

    
    
    


    
看我看我看我

鼠标移动的样式修改，现在是竖线，改成手形

    
    
    


    
看我看我看我

点击浏览器图标，查看网页效果