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
outline-offset:10px

轮廓: 位于边框边缘外围的线
offset: 让轮廓向外偏移10px画

border 围绕在内边距和内容外的边框
padding 内填充: 内容与边框的间距
content 内容: 显示数据

margin:10px(上) 10px(右) 10px(下) 10px(左); 按序设置外边距的大小,这个顺序是从上开始顺时针画一个框

    6. 位置    

position

定位方式,取值如下
static: 静态,不受top等设置影响,出现在正常流中
fixed: 相对浏览器窗口是固定的,即使窗口滚动它也不动
relative: 相对于其正常位置
absolute: 相对于其父元素,不占空间

position:absolute;
z-index:-1;

与文档流无关,不占据空间
z-index指定堆叠顺序,相当于z轴

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,...);
background: radial-gradient(方向/角度,颜色1,颜色2,...);

方向: to bottom、to top、to right、to left、to bottom right
角度: 从12点方位顺时针增加
设置背景颜色渐变,线性、

    8. 显示方式    

display

none: 不显示(不占空间)
block: 块元素
inline: 内联元素

visibility

visible: 可见
hidden: 不可见(仍占空间)
collapse: 和hidden效果类似

    9. 图片设置     

background-image:url("1.jpg") 设置背景图片

border: 30px solid transparent;
border-image-source:url("1.jpg");
border-image-slice:20 20 20 20;
border-image-width:10 10 10 10;
border-image-outset:1 1 1 1;
border-image-repeat:repeat/sterch

border:边框
source:边框图像地址
slice:4个值代表4条线距边的位置
width:边框图片宽度
outset:图片延伸到元素盒子的大小
repeat:图片扩展方式重复/拉伸

list-style-image:url('1.jpg');

列表标记的图片

boder-image原理:
把图片用4条线切割成9宫格。每个格子与边框位置一一对应。9宫格的中间部分是透明的,空的。若image-width大于border宽度,多余部分可延伸到内容的空间

    10. 图像处理    

filter:滤镜属性(效果大小)

blur(2)高斯模糊为2
grayscal(10%)转换成10%的灰度图...

opacity:0.2

指定不透明度
从0.0(完全透明)到1.0(完全不透明)

background:url(1.jpg) 0 0;

图像拼合技术,从图的某个位置开始截取一部分
0 0: 指定从图片左、上开始的位置

图像变换

transform:roate(30deg);

transform: 变形转换属性。
让某个元素改变形状,大小和位置
roate(): 2D转换方法,旋转

transform:rotateX(30deg) 3D转换方法,沿X轴3D旋转

div{
width:100px;
transition-property:width;
transition-duration:2s;
transition-timing-function:linear;
transition-delay:2s;}
div:hover{width:300px;}

transition: 过渡,从一种样式转变到另一个时,
无需使用Flash动画或JavaScript
鼠标移动到div上,它的宽度(property)从100逐渐变到300
timing-function: 随时间变化速度变化
变化持续时间(duration): 2s
变化开始时间(延迟delay): 2s

div{
animation: myAnimation 5s;}
@keyframes myAnimation{
0% {background:red;}
25 {background:yellow;}
100%{background:blue;}}

animation: 动画名称 持续时长
@keyframes规则,myAmimation动画名称
0%->100%指定变化发生的时间
变化完成后回到0%的情况

    11. 间距    

letter-spacing 字母间距
word-spacing:30px; 单词间距
border-collapse:separate;
border-spacing:10px 50px;

表格中相邻单元格的边框间距离
仅用于"边框分离"模式

white-space

指定元素内的空白怎样处理

    12. 大小    

width(宽) + padding(内边距) + border(边框) = 实际宽度
height(高) + padding(内边距) + border(边框) = 实际高度

 
background-size: 80px 60px; 背景大小
font-size:10px 字体大小

overflow:auto;
resize:both|horizon|vertical;

需设置overflow
resize:允许用对元素大小进行手动调整

box-sizing:content-box|border-box

指定width/height设置的目标为内容盒子|边框盒子

    13. 分列    

column-count:3;
column-span:1|all;
column-gap:5px;
column-width:10px;
column-fill:auto|balance;
column-rule-color:#000000;
column-rule-style:solid|dotted;
column-rule-width:10px

column将元素分成多列(栏)显示
count: 列数
span: 跨1或所有列
gap: 两列的间距
width: 列的宽度
fill: 填充方式自动或尽量列长平衡
column-rule: 列与列之间的线的设置

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/

最新文章

  1. XML学习笔记6——XPath语言
  2. Python之路【第十八篇】:Web框架们
  3. js中函数的定义
  4. webgame设计之功能模块的代理模式
  5. Ubuntu安装Flash
  6. mybatis sql in 查询(mybatis sql语句传入参数是list)mybatis中使用in查询时in怎么接收值
  7. ionic一些常见问题及方法(网页链接式)
  8. oracle ORA-12519,TNS:no appropriate service handler found的
  9. reactor官方文档译文(1)Reactor简介
  10. 开发完整的Web项目必备
  11. .net 系列:事件和委托
  12. loadrunner-获取返回值和自定义参数(参数运算)
  13. MySQL慢查询1- 开启慢查询
  14. 城市里的间谍B901
  15. windows 如何不显示带点的文件名、文件夹?
  16. 3D 网页,webgl ,threejs 实例
  17. jquery val() text() html()的区别
  18. CSS鼠标经过另类做法
  19. 《剑指offer》第十九题(正则表达式匹配)
  20. verilog 不可综合语句

热门文章

  1. 简单配置,让ES6脚本在浏览器里飞
  2. Sqlserver 连接oracle和mysql数据库 已经oracle导入sqlserver表数据
  3. cpp #,##
  4. mysql 原理 ~ LRU 算法与buffer_pool
  5. EL知识点总结
  6. java程序中默认整形值常量是什么类型的?如何区分不同类型的整型数值常量?
  7. ASP.NET MVC - 多国语言的简单实现
  8. JS 如何将 HTML 页面导出为多页 PDF
  9. Ettercap内网渗透
  10. Linux 查看系统硬件信息[转]