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. configParse模块（二十七）

    configparser用于处理特定格式的文件,其本质上是利用open来操作文件. # 注释1 ; 注释2 [section1] # 节点 k1 = v1 # 值 k2:v2 # 值 [section ...

  2. mysql存储过程和常用流程控制

    /* 该代码是创建了一个名叫"p4"的存储过程并设置了s1,s2,s3两个int型一个varchar型参数,还可以是其他数据类型,内部创建了x1,x2两个变量 DELIMITER是 ...

  3. Druid数据源对数据库访问密码加密好麻烦

    开发中,druid数据源对数据库密码进行了加密,每次切换数据库或者修改密码后,感觉很麻烦. 解决办法: 1.用工具类中的Java代码进行加解密. 需要用到com.alibaba.druid.filte ...

  4. thread join和detach的区别

    线程状态: 在一个线程的生存期内,可以在多种状态之间转换,不同的操作系统可以实现不同的线程模型,定义许多不同的线程状态,每个状态还可以包含多个子状态,但大体来说,如下几种状态是通用的: 1)就绪:参与 ...

  5. 在 chrome 上导出 pdf

    用html+css写出网页,然后在chrome上导出pdf 1. command + p:快捷呼出打印: 2. “目标打印机”:选择“更改”,之后选择“另存为PDF”: 3. 点“更多设置”,可以勾选 ...

  6. Python基础(函数部分)-day04

    写在前面 上课第四天,打卡: 加勒比海盗今天上映:端午节公司发的粽子很有范! 一.函数的基本概念 - 函数是什么?  函数,就是一个'锤子',一个具有特定功能的'锤子',使用者可以在适当的时候使用这个 ...

  7. LINQ to SQL 模拟实现 ROW_NUMBER() OVER(ORDER BY ...) 的功能

    Ø  前言 本来是想使用 LINQ 实现类似 SQL: ROW_NUMBER() OVER(ORDER BY -) 的功能,但是貌似 LINQ 不支持,反正没找到解决办法,无奈使用了LINQ Sele ...

  8. buildroot构建项目（六）--- u-boot 2017.11 适配开发板修改 4 ---- 系统启动初始化之三

    一.内存控制器 在关闭了MMU和caches 之后 就进入lowlevel_init 函数,对内存控制器进行初始化.lowlevel_init.S (board\samsung\mini2440) 1 ...

  9. Nginx 虚拟主机示例

    Nginx server 模块 server { // 标识虚拟主机开始 listen ; ## // 指定虚拟主机服务器端口 server_name localhost; // 指定 IP地址或者域 ...

  10. NOIP2018 前流水账

    不务正业系列 学习yyb,zsy,ljq,mona等大佬而写的 \(qwq\) 不知道前言写些什么 \(qwq\) 尽量日更好吧 \(qwq\) \(upd:\)日更是不可能日更的,这辈子不可能的 \ ...