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. Flash与JavaScript互动

    最近做的一个项目需要用javascript来实现自动复制文本到剪切板,但测试时发现只有ie6.0支持. 到百度搜索后才发现,原来ie7.0.firefox是不支持这样的操作的,随后又搜索了一下,找到一 ...

  2. 关于jqGrid中GridUnload方法的困惑

    首先 GridUnload 这个方法在 4.7.1 + 的版本中已经删除,直接把4.7.1中的grid.common.js合来用就行. GridUnload 这个方法是直接删除原来的table,重新生 ...

  3. oi程序提交注意：bool

    比如我一个程序用了bool类型(#include<stdbool.h>) 在poj以c的方式提交不通过显示Compile Error,而用gcc的方式提交通过了, 也许其它的#includ ...

  4. 多个 ng-app 中 Controllers & Services 之间的通信

    原文发布在个人独立博客上,链接:http://pengisgood.github.io/2016/01/31/communication-between-multiple-angular-apps/ ...

  5. js event 冒泡和捕获事件详细介绍【转】

    冒泡和捕获 冒泡: 事件从内向外,从下向上执行 (默认行为) 捕获: 事件从外向内,从上向下执行 vue之capture 捕获事件 capture.html <!DOCTYPE html> ...

  6. golang基础数据结构链表

    链表 链表(Linked list),是一种线性表,但是并不会按线性的顺序存储数据,而是在每一个节点里存到下一个节点的指针(Pointer). 每个节点包含下一个节点的地址,这样把所有的节点串起来了, ...

  7. 流媒体技术学习笔记之（十七）FFmpeg 3.3《希尔伯特》-新版本的亮点

    FFmpeg 3.3“Hilbert”,一个新的主要版本的一些亮点: 苹果Pixlet解码器 NewTek SpeedHQ解码器 QDMC音频解码器 PSD(Photoshop Document)解码 ...

  8. DOM-Document对象

     一. 整体介绍   这里介绍DOM对象中的Document对象. 何为Document对象?每个载入浏览器的HTML文档都会成为Document对象,Document对象可以帮助我们对所有的HTML ...

  9. Varish 缓存

    varish 缓存 2013年06月17日,Varnish Cache 3.0.4 发布,为目前最新版本. varish是以内存作为共享容器的:内存的大小决定了它的缓存容量.相对于主要以硬盘为存储的s ...

  10. luogu P2123 皇后游戏

    传送门 跟国王游戏一样的分析 考虑相邻的两个大臣,设他们前面的\(\sum a_j\)为\(s\),同时注意到后面人的贡献更大 所以\(i\)在前面时,\(c_j=\max(\max(c_{last} ...