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. MATLAB：图像二值化、互补图（反运算）（im2bw，imcomplement函数）

    图像二值化.反运算过程涉及到im2bw,imcomplement函数,反运算可以这么理解:原本黑的区域变为白的区域,白的区域变为黑的区域. 实现过程如下: close all; %关闭当前所有图形窗口 ...

  2. 【python】UnicodeEncodeError: 'ascii' codec can't encode/decode characters

    解决方案在文件头插入 # encoding=utf8 import sys reload(sys) sys.setdefaultencoding('utf8')

  3. kubectl命令自动补全

    kubectl这个命令行工具非常重要,与之相关的命令也很多,我们也记不住那么多的命令,而且也会经常写错,所以命令自动补全是非常有必要的,kubectl命令行工具本身就支持complication,只需 ...

  4. js题目小记

    一.字符串反转 第一种方法:利用数组方法 //先split将字串变成单字数组,然后reverse()反转,然后将数组拼接回字串 var str = "abcdef"; str.sp ...

  5. Git-Credential-Manager-for-Mac-and-Linux

    1.安装brew 安装命令: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/instal ...

  6. Python基础【day03】：集合入门（三）

    本节内容 1.集合常用方法总结2.定义3.关系测试 集合是无序的,天生不重复的数据组合,它的作用如下: 去重,即:把一个列表变成集合,就去重了 关系测试,即:测试两组集合的交集.并集和差集等 一.集合 ...

  7. SerializeField和HideInInspector

    在Unity中,一个变量为公有类型,但是呢你不想让它显示在属性面板上,这个时候用 [HideInInspector] 这是隐藏的意思,举例: 用了[HideInInspector] 之后 就是这样用的 ...

  8. 设计模式---对象创建模式之工厂方法模式（Factory Method）

    前提:“对象创建”模式 通过“对象创建”模式绕开new,来避免对象创建(new)过程中所导致的紧耦合(依赖具体类),从而支持对象创建的稳定.它是接口抽象之后的第一步工作. 典型模式(表现最为突出) 工 ...

  9. JAVA记录-SpringMVC+Mybatis几个核心注意的地方

    1.DispatcherServlet   -- 前置控制器 DispatcherServlet是一个Servlet,所以可以配置多个DispatcherServlet. DispatcherServ ...

  10. Exception异常转String【转】

    把异常的栈轨迹以String形式返回 /** * 把异常的栈轨迹以String形式返回,而不是直接打印到console * @author King * @time 2015-04-29 * @ret ...