css入门

一.架构分析
    页面 => div的层级结构 => 具有采用哪些功能标签显示内容
    结构层 > 位置层(布局层) > 内容层

二.css引入

- 行间式
    <div style="width: 100px; height: 100px">
    </div>
    <!-- 简单直接,针对性强 -->

- 内联式
    <head>
       <style>
           选择器 {
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <!-- 解耦合了,可读性强 -->

- 外联式
    /* index.css */
    选择器 {
        width: 100px;
        height: 100px;
    }
    /* 适合团队高效率开发, 耦合性低, 复用性强 */
    <!-- index.html -->
    <link rel='stylesheet' type='text/css' href='./index.css'>

三.三种引入"优先级"分析
    1.没有优先级
    2.不同的属性样式协同操作,相同的样式采用覆盖机制,选择逻辑最下方的
    3.行间式一定是逻辑最下方的样式

四.文本样式
    /*字体样式*/
    .box {
        /*字族*/ font-family: "STSong", "微软雅黑";
                /*STSong作为首选字体, 微软雅黑作为备用字体*/
        /*字体大小*/ font-size: 40px;
        /*字重*/ font-weight: 900;
        /*风格*/ font-style: italic;
        /*行高: 某一段文本在自身行高中可以垂直居中显示 => 文本垂直居中*/
                line-height: 200px;

        /*字体整体设置*/
        /*字重 风格 大小/行高 字族  (风格可以省略) ***** */
        font: 100 normal 60px/200px "STSong", "微软雅黑";
    }

    i {
        /*normal清除系统字体风格*/
        font-style: normal;
    }

    .box {
        /*水平居中: left | center | right ***** */
                /*text-align: center;*/
        /*字划线: overline | line-through | underline  */
                text-decoration: overline;
        /*字间距*/ letter-spacing: 2px;
        /*词间距*/ word-spacing: 5px;
        /*缩进*/text-indent: 2em;
            /*1em相当于一个字的宽度*/
    }
    a {
        /*取消划线*/
        text-decoration: none;
    }

    长度单位:px|em|rem|cm|mm|vw|vh|in
    颜色:rgb(0,255,189)|rgb(0,255,189,0.5)|red|#000000~#FFFFFF

五.基础选择器
选择器:css连接html标签的桥梁,建立连接后就可以控制标签样式
    * | div | . | #
    标签: 一般用于最内层样式修饰
    类:使用范围最广,布局的主力军
    id:唯一标识的布局,不能重复
优先级:!important> id >类[属性] >标签> 通配  (优先级:同一标签同一属性)
    <style>span{font-size:20px!important;}</style>(尽量不要使用!important)

    组合选择器  权重(同类型个数比较)
    伪类选择器

六.display
    .box {
        /*block: 块级标签, 独占一行, 支持所有css样式*/
        /*display: block;*/

        /*inline: 内联(行级)标签, 同行显示, 不支持宽高*/
        /*display: inline;*/

        /*inline-block: 内联块标签, 同行显示, 支持所有css样式*/
        display: inline-block;

        /*标签的嵌套规则*/
        /*①*/
        /*block可以嵌套所有显示类型标签, div | h1~h6 | p*/
        /*注: hn与p属于文本类型标签,所有一般只嵌套inline标签*/
        /*②*/
        /*inline标签只能嵌套inline标签, span | i | b | sup | sub | ins */
        /*③*/
        /*inline-block可以嵌套其他类型标签, 但不建议嵌套任意类型标签 img | input*/
    }

Python-CSS 基础的更多相关文章

  1. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

  2. Python爬虫基础之requests

    一.随时随地爬取一个网页下来 怎么爬取网页?对网站开发了解的都知道,浏览器访问Url向服务器发送请求,服务器响应浏览器请求并返回一堆HTML信息,其中包括html标签,css样式,js脚本等.我们之前 ...

  3. 第五模块：WEB开发基础 第1章·HTML&CSS基础

    01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...

  4. HTML&CSS基础-meta标签

    HTML&CSS基础-meta标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.常见字符集 1>ASCII 我们知道计算机是由外国人发明的,他们当时也没有考虑到 ...

  5. HTML&CSS基础-ps的基本操作

    HTML&CSS基础-ps的基本操作 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.   我们工作中可能会经常需要将一个图片做成一个网页,而图片中的字体大小,行间距,图中lo ...

  6. Python+Selenium基础入门及实践

    Python+Selenium基础入门及实践 32018.08.29 11:21:52字数 3220阅读 23422 一.Selenium+Python环境搭建及配置 1.1 selenium 介绍 ...

  7. 前端学习（九）：CSS基础

    进击のpython ***** 前端学习--CSS基础 CSS的样式可以写在哪呢?其实CSS的样式插入式十分灵活的 按照插入的形势来看,可以分为三种情况 而接下来就对这三种情况进行简单的讨论 内嵌式 ...

  8. 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏

    [图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...

  9. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  10. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

随机推荐

  1. django分页功能

    采用django自带的Paginator功能 from django.core.paginator import Paginator food = foodInfo.objects.filter(fo ...

  2. SSD详解

    This results in a significant improvement in speed for high-accuracy detection(59 FPS with mAP 74.3% ...

  3. python自动化运维之路~DAY2

    python自动化运维之路~DAY2 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.字符编码与转码 1.什么是编码. 基本概念很简单.首先,我们从一段信息即消息说起,消息以人类 ...

  4. 带精英策略的快速非支配排序遗传算法 NSGA-II 算法

    NSGAII(带精英策略的非支配排序的遗传算法),是基于遗传算法的多目标优化算法,是基于pareto最优解讨论的多目标优化,下面介绍pareto(帕累托)最优解的相关概念. Paerot支配关系 Pa ...

  5. 学习windows编程 day4 之 映射模式

    LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam) { HDC hdc; PAINTSTRU ...

  6. 常用的一些js方法

    <input type="text" name="number" onkeyup="floatNum(this)"/> // 数 ...

  7. __attribute__ 机制详解

    GNU C 的一大特色就是__attribute__ 机制.__attribute__ 可以设置函数属性(Function Attribute).变量属性(Variable Attribute)和类型 ...

  8. Linux记录-Linux 企业运维人员最常用 150 个命令

    命令 功能说明 线上查询及帮助命令 (2 个) man 查看命令帮助,命令的词典,更复杂的还有 info,但不常用. help 查看 Linux 内置命令的帮助,比如 cd 命令. 文件和目录操作命令 ...

  9. Java中BIO、NIO、AIO的区别和应用场景

    学习IO,首先要明白四个东西. 1.同步            java自己去处理io. 2.异步          java将io交给操作系统去处理,告诉缓存区大小,处理完成回调. 3.阻塞     ...

  10. ettercap中间人攻击--参数介绍

    攻击和嗅探  -M,  --mitm ARP欺骗,参数 -M arp remote    # 双向模式,同时欺骗通信双方,-M arp:remote. oneway   #单向模式,只arp欺骗第一个 ...