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

CSS 概述

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

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。

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

div和span的理解

  1. div是一个html标签, 一个块级元素(单独显示一行), 单独使用没有任何意义, 必须结合CSS来使用, 主要用于页面的布局;
  2. span是一个html标签, 一个内联元素(显示一行), 它单独使用没有任何意义, 必须结合css使用, 主要对括起来的内容进行样式的修饰;

类选择器

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

.name{text-align:center}

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

<p class=name>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .sheen{font-size: large;color: salmon}
    </style>
</head>
<body>
<div class="sheen">
    Sie sprechen gut Deutsch.
</div>
<div class="star">
    Was machen Sie hier in Berlin?Arbeiten Sie hire?
</div>
<div class="sheen">
    Nein,ich studiere.
</div>
</body>
</html>

ID选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style>
        #sheen{font-size: x-large;color: rosybrown}
        #star{font-size: large;color: #c0ffff}
        #clotho{font-size: xx-large;color: darkgreen}
    </style>
</head>
<body>
    <div id="sheen">
        Sheen:Sie sprechen gut Deutsch.
    </div>
    <div id="star">
        Star:Was machen Sie hier in Berlin?Arbeiten Sie hire?
    </div>
    <div id="clotho">
        Clotho:Nein,ich studiere.
    </div>
</body>
</html>

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        div{margin: 0 auto;border: 1px;color: darkgreen;font-size: larger;text-align: center}

    </style>
</head>
<body>
<h3>使用CSS</h3>
<div>
    类选择器
</div>
<div>ID选择器</div>
<div>标签选择器</div>
</body>
</html>

设置链接的样式

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

CSS样式的引入

引入方式:

1). 行内引入: <a style="行内引入的样式">
2). 内部引入: 写在head标签里面的style标签里面的样式;
3). 外部引入: 将css样式独立成一个文件, 通过<link rel="stylesheet" href="css/main.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;

}
<!--HTML文件-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            background: red;
        }
    </style>
    <link rel="stylesheet" href="css/main.css">

</head>
<body>

<div>
    <ul>
        <li style="background: blue">
            <a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
        </li>
        <li>CSS</li>
        <li>JS</li>
        <li>python</li>
    </ul>
</div>
</body>
</html>

原文地址:https://www.cnblogs.com/qianduanwriter/p/11832320.html

时间: 2024-10-03 00:36:56

python大佬养成计划----CSS样式类的相关文章

python大佬养成计划----HTML网页设计(序列)

序列化标签 1.有序标签--ol和li 有序列表标签是<ol>,是一个双标签.在每一个列表项目前要使用<li>标签.<ol>标签的形式是带有前后顺序之分的编号.如果添加或者删除一个列表项,编号会自动调整. <ol> <li>第一项</li> <li>第一项</li> <li>第一项</li> ... </ol> 有序标签的属性--start start属性是用来设置编号开始的

python大佬养成计划----HTML DOM

什么是DOM? DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口.HTML DOM 定义了访问和操作 HTML 文档的标准方法.DOM 以树结构表达 HTML 文档.HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法.换言之,HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准. 根据HTML DOM标准,HTML中所有内容都是节点. 整个文档是一个文档节点 每个 HTML 元素是元素

python大佬养成计划----HTML网页设计(表格)

制作网页时,要合理规划网页布局.比如,在网页中添加一个表格,可分为上.中.下三部分,上部存放网页标题或LOGO图片,中间部分是整个网页的主体内容,底部就是相关制作信息.此外,单元格里还可再添加单元格,将内容分类别.分层次合理规划. 表格标签--table 是一个双标签.一个表格中包含<table>.<tr>.<td>三个基本元素.首标签<table>和尾标签</table>表示一个表格的开始和结束.'tr=table row'用于表示一行的开始和

python+pycharm+django admin css样式出问题

最近打算学习一下Python,基础知识有了大概的了解,想上手搞搞东西. 我用的python 3.5+pycharm+django 1.11.2 在使用Django,打开127.0.0.1:8000/admin时,发现admin模块css样式文件丢失,无法调用 按F12 发现admin/base.html文件出问题. base.html文件路径: python35\Lib\site-packages\django\contrib\admin\templates\admin 解决方法: 1.删除ba

Python 使用Google编辑css样式

使用google浏览器写css 1.使用pychram,创建一个html界面,使用Google运行,打开设置-更多工具-开发者工具 2.选中Elements,可看到html代码 3.编辑body,选中body,出现三个点(设置),点击Edit as HTML,可写标签,例如div 4.新增一个div标签 5.双击可以进行编辑 6.选择小尖头,选择渲染后的界面区域,可过滤到这个div的代码 7.给div标签添加类选择器,class='class1' 8.在head标签中添加一个style(css样

python + selenium webdriver 复合型css样式的元素定位方法

<div class="header layout clearfix"></div> 当元素没有id,没有name,没有任何,只有一个class的时候,应该如何去定位这个元素 1.页面存在多个div,使用find_elements_by_tag_name("div")[x] 这种方法可以使用,但是要去数第几个div,太坑 2.使用find_element_by_class_name("header layout clearfix&q

Bootstrap - 全局css样式类

Div .container .row .container-fluid 栅格参数 .col-xs-* .col-sm-* .col-md-* .col-lg-* 列偏移 http://v3.bootcss.com/css/#grid-offsetting 使用这个就不需要强制通过补满栅格12列来布局了 .col-xs-offset-* .col-sm-offset-* .col-md-offset-* .col-lg-offset-* 表单 http://v3.bootcss.com/css/

jquery为指定的元素添加或者删除指定样式类

jquery为指定的元素添加或者删除指定样式类:在实际应用中,可能需要为指定的元素动态的添加或者删除指定css样式类,下面就通过简短的代码做一下介绍.一.添加css样式类: $("#antzone").addClass("class"); 上面的代码为指定的元素添加指定的样式类.更多相关内容可以参阅jQuery的addClass()方法一章节.二.删除css样式类: $("#antzone").removeClass("class&qu

使用less函数实现不同背景的CSS样式

今天在公司遇到一个比较特殊的需求,需要完成这样的布局,如下图: 每一个块的背景需要不同,而其他都是相同的,这时候就应该把背景提出来单独写成一个CSS样式类. 那么问题来了,有四个不同的背景需要写4个基本重复的CSS样式类,要是有更多的背景呢?如何避免这种重复的操作? 幸运的是,公司的底座使用less来编辑CSS样式的,于是今天用了一个小时的时间来研究如何使用less来简化上面这种重复的操作. 具体代码如下: //less中的背景图片循环 .bgimgwhile(@counter) when (@