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. Stream基础知识

    Stream API Stream是Java8中处理集合的关键抽象概念,它可以指定你希望对集合进行的操作,但是将执行操作的时间交给具体实现来决定.例如,如果你希望计算某个方法的平均值,你可以在每个元素 ...

  2. 二叉查找树（BST)、平衡二叉树(AVL树)

    二叉查找树(BST) 特殊的二叉树,又称为排序二叉树.二叉搜索树.二叉排序树. 二叉查找树实际上是数据域有序的二叉树,即对树上的每个结点,都满足其左子树上所有结点的数据域均小于或等于根结点的数据域,右 ...

  3. 利用ansible-playbook从测试环境获取tomcat中java项目新版本发布到生产环境

    一.环境描述 安装有ansible的服务器:192.168.13.45 测试环境服务器:192.168.13.49 /home/app/api-tomcat/webapps/api.war为测试环境新 ...

  4. Nginx+Swoole服务器配置

    nginx 配置 server { listen 80; server_name www.swoole.com; root /data/wwwroot/www.swoole.com; location ...

  5. Python基础【day03】：入门知识拾遗（八）

    本节内容 1.作用域 2.三元运算 3.进制 一.作用域 对于变量的作用域,执行声明并在内存中存在,该变量就可以在下面的代码中使用. 1 2 3 if 1==1:     name = 'wupeiq ...

  6. 匿名内部类中使用的外部局部变量为什么只能是final变量

    被匿名内部类引用的变量会被拷贝一份到内部类的环境中 但其后,在外部,该变量如果被修改,则内部外部不一致 Java为了避免数据不同步的问题,做出了匿名内部类只可以访问final的局部变量的限制. 究其原 ...

  7. VUE2.0 饿了吗视频学习笔记（七-终）：compute,循环,flex,display:table

    一.star组件使用到了computed属性 computed相当于属性的一个实时计算,当对象的某个值改变的时候,会进行实时计算. computed: { starType() { return 's ...

  8. WIN10下安装USB转串口驱动出现“文件的哈希值不在指定的目录”的解决办法

    今天安装openJTAG驱动时出现“文件的哈希值不在指定的目录”,系统为WIN10专业版. 原因是驱动无数字签名,在WIN10中是不安全的驱动,所以显示哈希值不在范围内不能安装. 经查阅已经解决,发放 ...

  9. Linux - 文件操作

    touch file # 创建空白文件 rm -rf 目录名 # 不提示删除非空目录(-r:递归删除 -f强制) dos2unix # windows文本转linux文本 unix2dos # lin ...

  10. JavaScript之正方教务系统自动化教评[插件-转载]

    [声明]本插件系学院学长原创,非博主所创,发布此处,仅供学习和效仿. /** * @name:正方教务系统自动化教评-插件 * * @author:chenzhongshu * @date:2017- ...