CSS学习——基础分类整理
1. CSS
层叠样式表: Cascading Style Sheets,定义如何显示html元素
CSS规则: 选择器{属性: 值; 属性: 值;}
CSS注释: /*在这里写注释说明*/
2. 选择器
#元素id | 用元素的id属性来设置 | |
.className | 用html的class属性来设置 | |
p.className | p元素,且class="className" | |
div p | 后代选择器(空格分隔): div内的所有p | 基于关系 |
div>p | 子元素选择器(>分隔): div的直接子元素 | |
div+p | 相邻兄弟选择器(+分隔): 与div同父且紧跟div的p | |
div~p | 后续兄弟选择器(~分隔): 与div同父且在div后的p | |
div:first-child | 是第一个儿子的div first-child类似于形容词 | 伪类:表示特定状态 |
a:link | a链接未点击时 | |
a:hover | 鼠标移到a上时 |
3. 伪类 为选择器添加一些特殊效果
语法 1. 选择器:伪类{属性:值} 2. 选择器.类:伪类{属性:值}、
a:link/visited/hover/active | 链接:未访问过/访问过/移到到链接/正在活动 |
p:befor/after | 在元素前/后插入内容 |
p:first-child/last-child/nth-child(2) | 作为其它元素第1个/最后1个/第2个子元素的p |
p:first-letter/first-line | p的第一个字母/行 |
4. 样式表 可对一个元素设置多次样式,多重样式会层叠为一个,优先级从1->3降低
<body style="background-color:Black"></body> | 1. 内联样式 |
<head> <style> body {background-color:Black;} </style> </head> |
2. 内部样式表 |
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> |
3. 外部样式表 |
5. 盒子模型 所有html元素可看作盒子,元素从外到内为: 外边距,轮廓,边框,内填充,和实际内容。
margin | 外边距: 与其父元素的间距,透明 |
outline:2px black solid |
轮廓: 位于边框边缘外围的线 |
border | 围绕在内边距和内容外的边框 |
padding | 内填充: 内容与边框的间距 |
content | 内容: 显示数据 |
margin:10px(上) 10px(右) 10px(下) 10px(左); 按序设置外边距的大小,这个顺序是从上开始顺时针画一个框
6. 位置
position |
定位方式,取值如下 |
position:absolute; |
与文档流无关,不占据空间 |
top,right,bottom,left | 元素外边距与相应边的偏移量(相对的元素与position有关) |
float:left/right/none | 元素尽量向左或向右移动,浮动元素后的元素才会受影响, |
clear:left/right/none/both | 要求元素某一侧不能出现浮动元素 |
text-align:left/right/center/justify | 文本对齐方式: 左/右/居中/自动调整间距靠到两端 |
background-position:left right | 背景设置开始的位置x(left/right/center) y(top/bottom/center) |
7. 颜色
color | 文本颜色 |
background-color | 背景颜色 |
border-color | 边框颜色 |
outline-color | 轮廓颜色 |
text-decoration-color | 文字横线(下划、删除)颜色 |
background: linear-gradient(方向/角度,颜色1,颜色2,...); |
方向: to bottom、to top、to right、to left、to bottom right |
8. 显示方式
display |
none: 不显示(不占空间) |
visibility |
visible: 可见 |
9. 图片设置
background-image:url("1.jpg") | 设置背景图片 |
border: 30px solid transparent; |
border:边框 |
list-style-image:url('1.jpg'); |
列表标记的图片 |
boder-image原理:
把图片用4条线切割成9宫格。每个格子与边框位置一一对应。9宫格的中间部分是透明的,空的。若image-width大于border宽度,多余部分可延伸到内容的空间
10. 图像处理
filter:滤镜属性(效果大小) |
blur(2)高斯模糊为2 |
opacity:0.2 |
指定不透明度 |
background:url(1.jpg) 0 0; |
图像拼合技术,从图的某个位置开始截取一部分 |
图像变换
transform:roate(30deg); |
transform: 变形转换属性。 |
transform:rotateX(30deg) | 3D转换方法,沿X轴3D旋转 |
div{ |
transition: 过渡,从一种样式转变到另一个时, |
div{ |
animation: 动画名称 持续时长 |
11. 间距
letter-spacing | 字母间距 |
word-spacing:30px; | 单词间距 |
border-collapse:separate; border-spacing:10px 50px; |
表格中相邻单元格的边框间距离 |
white-space |
指定元素内的空白怎样处理 |
12. 大小
width(宽) + padding(内边距) + border(边框) = 实际宽度 |
|
background-size: 80px 60px; | 背景大小 |
font-size:10px | 字体大小 |
overflow:auto; |
需设置overflow |
box-sizing:content-box|border-box |
指定width/height设置的目标为内容盒子|边框盒子 |
13. 分列
column-count:3; |
column将元素分成多列(栏)显示 |
14. 单位
p{font-size: 10px;} | |
div{font-size:10px;} p{font-size: 1.5em;} |
p的字体大小 1.5*p的最近父元素的font-size |
p{font-size: 1.5rem;} | 针对根元素html |
p{font-size: 8vm;} p{font-size: 8vh;} |
vm/vh把视口的宽和高分成100份 |
参考:
https://www.runoob.com/cssref/
CSS学习——基础分类整理的更多相关文章
- (zhuan) 126 篇殿堂级深度学习论文分类整理 从入门到应用
126 篇殿堂级深度学习论文分类整理 从入门到应用 | 干货 雷锋网 作者: 三川 2017-03-02 18:40:00 查看源网址 阅读数:66 如果你有非常大的决心从事深度学习,又不想在这一行打 ...
- html学习——基础分类总结
1. html 超文本标记语言HyperText Markup Language.html文档基本结构: <!DOCTYPE html><head> <! ...
- 工作流(Workflow)学习---基础知识整理
工作流定义: 工作流是将一组任务组织起来以完成某个经营过程:定义了任务的触发顺序和触发条件,每个任务可以由一个或多个软件系统完成,也可以由一个或一组人完成,还可以由一个或多个人与软件系统协作完成. 工 ...
- 【css学习整理】css基础(样式,语法,选择器)
CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...
- 学习ReactNative笔记整理一___JavaScript基础
学习ReactNative笔记整理一___JavaScript基础 ★★★笔记时间- 2017-1-9 ★★★ 前言: 现在跨平台是一个趋势,这样可以减少开发和维护的成本.第一次看是看的ReactNa ...
- CSS的基础学习
CSS学习 --------学习资源 http://www.csszengarden.com/ CSS语法检查http://jigsaw.w3.org/css-validator/ 配置CSS的方法: ...
- HTML&&CSS基础知识点整理
HTML&&CSS基础知识点整理 一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. ...
- Python编程:基础学习常见错误整理
# Python学习之错误整理: # 错误一:# TypeError: cannot concatenate 'str' and 'int' objects# 不能连接str和int对象age = 2 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
随机推荐
- interactivePopGestureRecognizer --- iOS侧滑的问题
苹果一直都在人机交互中尽力做到极致,在iOS7中,新增加了一个小小的功能,也就是这个api:self.navigationController.interactivePopGestureRecogni ...
- jquery实现图片上传前的预览
html代码 <div id="uploadPreview"></div> <input id="uploadImage" typ ...
- Java SE之正则表达式一:概述
正则表达式 概念 定义:符合一定规则的表达式 作用:用于专门操作字符串 特点:用于一些特定的符号表示代码的操作,这样就简化了长篇的程序代码 好处:可以简化对字符串的复杂操作 弊端:符号定义越多,正则越 ...
- [C++]Linux之多进程运行代码框架
声明:如需引用或者摘抄本博文源码或者其文章的,请在显著处注明,来源于本博文/作者,以示尊重劳动成果,助力开源精神.也欢迎大家一起探讨,交流,以共同进步- 0.0 多进程代码框架示例 /* @url: ...
- :target方法实现切换
<!DOCTYPE HTML><html><head> <title>:target切换</title> <meta charset= ...
- linux 普通用户下使用 jdk 、Tomcat
需求: 在已经跑的 1.7java环境中需要跑1.8java环境所需要的tomcat,那么因为java环境的不同,nginx代理会出现很多问题,tomcat根本跑不起来,所以提供了以下解决方案. 一, ...
- mysql 半同步复制~ 整体概述与改进
一 简介:今天来聊聊增强半同步复制这一强悍的特性 二 原理解析 1 AFTER_COMMIT(5.6默认值) master将每个事务写入binlog ,传递到slave 刷新到磁盘(relay log ...
- Redis 集群环境的搭建
下载与解压 [root@localhost ~]# cd /usr/temp/ [root@localhost temp]# wget http://download.redis.io/release ...
- jquery禁用a标签
jquery禁用a标签方法1 01 02 03 04 05 06 07 08 09 10 11 12 $(document).ready(function () { $("a ...
- basic.js
1.数组 ① 删除内容 Array.prototype.removeByValue = function(val) { for(var i=0; i<this.length; i++) { if ...