《Python web开发》笔记三: CSS基础

qylost 发布于2019-07-31 12:23 / 1820人阅读

摘要：计算方式一个行内样式，一个，一个属性选择器或者伪类，一个元素名，或者伪元素。其他规则见拓展阅读。绝对定位设置了绝对定位之后，元素脱离文档流，其他的元素会调整位置来弥补它偏离后剩下的空隙。

CSS常用选择器

 - 通配符选择器  *
 - id选择器(id #)
 - 类选择器(class .)
 - 元素选择器(E)
 - 后代选择器(E F)
 - 子元素选择器(E>F)
 - 相邻兄弟元素选择器(E+F)
 - 群组选择器(selector1,selector2,...,selectorN)
 - nth选择器：
fist-child: 选择某个元素的第一个子元素
last-child: 选择某个元素的最后一个子元素

选择器权重

根据样式所在位置：!improtant > 内联样式 > style标签 > link标签。
计算方式：

一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1。其他规则见拓展阅读。

盒模型

box-sizing:border-box：此时元素的内边距和边框不再会增加它的宽度，更便于理解和计算。

CSS常用属性：

- 背景：
background-color：#9cbfcc;
background-repeat: repeat;
background:url("images/grass.png");
background-size: contain;（完全限制的设定的大小内部）
- 方位：
padding: 0 20px 30px 0 (上 右 下 左)
margin-right: 10px;
text-align：left;
display:block;(in-line,inline-block)
- 字体：
font-family: 字体
font-size: 大小
- 边框：
border-radius: 圆角半径设置
border: solid 8px rgb(210, 157, 65);  样式，粗细，颜色

定位技术 relative(相对定位)

设置了相对定位之后，通过修改top,left,bottom,right值，元素会在自身文档流所在位置上被移动，其他的元素则不会调整位置来弥补它偏离后剩下的空隙。

absolute(绝对定位)：

设置了绝对定位之后，元素脱离文档流，其他的元素会调整位置来弥补它偏离后剩下的空隙。元素偏移是相对于是它最近的设置了定位属性（position为relative或者absolute，值不为static）的元素。

fixed(固定定位)：

设置了固定定位之后，元素相对的偏移的参考是可视窗口，即使页面滚动，元素仍然会在固定位置。
重心修改：
transform: translate(-50%,-50%)，坐标原点从左上角改到了中心位置。

拓展阅读

选择器小游戏

你应该知道的一些事情——CSS权重

盒模型详解

常用CSS属性列表

absolute与relative

学习CSS布局

inline-vs-inline-block

备注

该笔记源自网易微专业《Python web开发》1.4、1.5、1.6、1.7节
本文由EverFight创作,采用知识共享署名 3.0 中国大陆许可协议进行许可。

云服务器 GPU云服务器 0基础学python开发有用吗 python web开发基础学习笔记 python开发web应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/45540.html

《Python web开发》笔记三: CSS基础

摘要：计算方式一个行内样式，一个，一个属性选择器或者伪类，一个元素名，或者伪元素。其他规则见拓展阅读。绝对定位设置了绝对定位之后，元素脱离文档流，其他的元素会调整位置来弥补它偏离后剩下的空隙。 CSS常用选择器 - 通配符选择器 * - id选择器(id #) - 类选择器(class .) - 元素选择器(E) - 后代选择器(E F) - 子元素选择器(E>F) - 相邻...

Scorpion 2019-08-29 12:14 评论0 收藏0
《Python web开发》笔记一：网页开发基础

摘要：网页基础知识网页的构成网页由和构成，是框架，是样式和装饰，则是各项功能实现。基础知识超文本标记语言，通过各种标签来表示网页的骨架。在同一窗口中打开。网页基础知识网页的构成网页由html、css和Javascript构成，html是框架，CSS是样式和装饰，JS则是各项功能实现。我们把网页的组成类比成一栋房子，Html相当于房子的结构，CSS相当于房子的装修装饰，JavaScrip...

3fuyu 2019-07-25 10:54 评论0 收藏0
《Python web开发》笔记一：网页开发基础

摘要：网页基础知识网页的构成网页由和构成，是框架，是样式和装饰，则是各项功能实现。基础知识超文本标记语言，通过各种标签来表示网页的骨架。在同一窗口中打开。网页基础知识网页的构成网页由html、css和Javascript构成，html是框架，CSS是样式和装饰，JS则是各项功能实现。我们把网页的组成类比成一栋房子，Html相当于房子的结构，CSS相当于房子的装修装饰，JavaScrip...

2shou 2019-08-29 11:27 评论0 收藏0
《Python web开发》笔记一：网页开发基础

摘要：网页基础知识网页的构成网页由和构成，是框架，是样式和装饰，则是各项功能实现。基础知识超文本标记语言，通过各种标签来表示网页的骨架。在同一窗口中打开。网页基础知识网页的构成网页由html、css和Javascript构成，html是框架，CSS是样式和装饰，JS则是各项功能实现。我们把网页的组成类比成一栋房子，Html相当于房子的结构，CSS相当于房子的装修装饰，JavaScrip...

gaomysion 2019-08-01 15:50 评论0 收藏0
SegmentFault 技术周刊 Vol.40 - 2018，来学习一门新的编程语言吧！

摘要：入门，第一个这是一门很新的语言，年前后正式公布，算起来是比较年轻的编程语言了，更重要的是它是面向程序员的函数式编程语言，它的代码运行在之上。它通过编辑类工具，带来了先进的编辑体验，增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获...

caspar 2019-08-15 13:33 评论0 收藏0