python大佬养成计划----CSS样式类

daryl 发布于2019-08-29 16:52 / 1234人阅读

摘要：与类选择器一样，选择器中可以忽略通配选择器。是唯一标识，只能被使用一次选择器标签选择器标签选择器使用类选择器选择器标签选择器设置链接的样式能够设置链接样式的属性有很多种例如等等。

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

HTML 标签原本被设计为用于定义文档内容。通过使用

、

这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。

所有的主流浏览器均支持层叠样式表

div和span的理解

div是一个html标签, 一个块级元素(多带带显示一行), 多带带使用没有任何意义, 必须结合CSS来使用, 主要用于页面的布局;

span是一个html标签, 一个内联元素(显示一行), 它多带带使用没有任何意义, 必须结合css使用, 主要对括起来的内容进行样式的修饰;

类选择器

使用类选择器前要对世纪文档做标记，才能发挥类选择器作用。

.name{text-align:center}

在文档后面的部分，通过包含与样式相关的"class"属性，且将其中一个预定义的样式指定为"name"值，就一块明确选择要对该标签的特定情况用何种样式




    
    类选择器
    



    Sie sprechen gut Deutsch.


    Was machen Sie hier in Berlin?Arbeiten Sie hire?


    Nein,ich studiere.

ID选择器

ID 选择器类似于类选择器，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。与类选择器一样，ID 选择器中可以忽略通配选择器。
ID是唯一标识，只能被使用一次




    
    ID选择器
    


    
        Sheen:Sie sprechen gut Deutsch.
    
    
        Star:Was machen Sie hier in Berlin?Arbeiten Sie hire?
    
    
        Clotho:Nein,ich studiere.

标签选择器




    
    标签选择器
    


使用CSS

    类选择器

ID选择器
标签选择器

设置链接的样式

能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

CSS样式的引入

引入方式:

1). 行内引入: 
2). 内部引入: 写在head标签里面的style标签里面的样式;
3). 外部引入: 将css样式独立成一个文件， 通过与当前html文件链接在一起.
三种引入方式的优先级: 就近原则

//CSS文件
div {
    width: 80%;
    margin: 0 auto;
    padding: 0;

}

ul {
    list-style-type: none
}

li {
    display: inline-block;
    width: 20%;
    background: snow;
    color: #333333;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    font-size: large;
    text-transform: capitalize;
}

li:hover {
    background: green;
    color: snow;
}

a:hover {

    color: snow;

}

服务器托管超融合服务器 css样式页面css样式 css的样式 css样式代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113955.html

python大佬养成计划----CSS样式类

摘要：与类选择器一样，选择器中可以忽略通配选择器。是唯一标识，只能被使用一次选择器标签选择器标签选择器使用类选择器选择器标签选择器设置链接的样式能够设置链接样式的属性有很多种例如等等。 CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问...

Steve_Wang_ 2019-08-02 11:38 评论0 收藏0
python大佬养成计划----CSS样式类练习

摘要：导航栏拥有易用的导航条对于任何网站都很重要。通过，您能够把乏味的菜单转换为漂亮的导航栏。导航栏需要标准的作为基础。导航栏基本上是一个链接列表，因此使用和元素是非常合适的制作水平导航栏有两种创建水平导航栏的方法。导航栏拥有易用的导航条对于任何网站都很重要。通过 CSS，您能够把乏味的 HTML 菜单转换为漂亮的导航栏。导航栏需要标准的 HTML 作为基础。在我们的例子中，将用标...

cnsworder 2019-08-30 15:54 评论0 收藏0
python大佬养成计划----CSS样式类练习

摘要：导航栏拥有易用的导航条对于任何网站都很重要。通过，您能够把乏味的菜单转换为漂亮的导航栏。导航栏需要标准的作为基础。导航栏基本上是一个链接列表，因此使用和元素是非常合适的制作水平导航栏有两种创建水平导航栏的方法。导航栏拥有易用的导航条对于任何网站都很重要。通过 CSS，您能够把乏味的 HTML 菜单转换为漂亮的导航栏。导航栏需要标准的 HTML 作为基础。在我们的例子中，将用标...

joyqi 2019-08-05 15:07 评论0 收藏0
python大佬养成计划----flask_bootstrap装饰网页

摘要：并且只有数据库中存在用户可以登陆网页。目前，对于用户注册，不返回数据库。用户注册时，添加信息到数据库中存放表单操作每个表单都由一个继承自的类表示类表示的是属性为的元素。当注册表单某一项不满足程序定义的规则时当注册成功时，返回 flask_bootstrap Bootstrap 是 Twitter 开发的一个开源框架，它提供的用户界面组件可用于创建整洁且具有吸引力的网页，而且这些网页还能...

jzman 2019-08-06 11:07 评论0 收藏0
python大佬养成计划----flask_bootstrap装饰网页

摘要：并且只有数据库中存在用户可以登陆网页。目前，对于用户注册，不返回数据库。用户注册时，添加信息到数据库中存放表单操作每个表单都由一个继承自的类表示类表示的是属性为的元素。当注册表单某一项不满足程序定义的规则时当注册成功时，返回 flask_bootstrap Bootstrap 是 Twitter 开发的一个开源框架，它提供的用户界面组件可用于创建整洁且具有吸引力的网页，而且这些网页还能...

darkbaby123 2019-07-31 18:39 评论0 收藏0