技术标签: css 笔记 前端 sass less css3
css:cascading style sheets
层叠 样式 表
html:搭建网页的结构,承载页面的数据
css:美化页面,修饰标签 (亚洲4大邪术)
html的属性只对当前标签有效,没有可重用性,导致没有可维护性
css 具备一定的代码重用性,提高了可维护性
但是css没有把重用性做到极致。使用scss可以做到极致
W3C建议使用css替代html属性,如果css无法替代的属性,就使用html属性就可以了
每个样式属性之间用分号连接,例:
color:red; 字体颜色
background-color:yellow; 背景颜色
font-size: 50px; 字号大小
在元素中,写style属性,在style属性中编写样式
<元素 style="样式声明;样式声明....."></元素>
<p style="color:red;background-color:yellow;font-size: 50px;">
只对当前元素生效,代码没有可重用性
内联样式默认优先级最高
内联样式只在学习和测试中使用,项目基本不用
在head标签中,编写style标签,在style标签内部,编写属性
选择器{样式声明;样式声明…}
选择器:定义页面中使用这个样式的元素条件
p{
color:purple;
background-color: pink;
}
只能在当前页面中使用,项目中使用较少,
学习和测试使用较多
创建一个.css文件,在html中的head标签里,使用link引入
<link rel="stylesheet" href="my.css"/>
必须有rel=“stylesheet”,代表当前文件和引入文件的关系
项目中大量使用
文本样式和字体样式的继承
绝大多数文本字体样式,可以被继承
a标签不会继承字体颜色
为一个标签定义多个样式规则
如果样式属性不冲突,都会作用到这个标签上
默认优先级
高 内联样式
中 内部样式,外部样式-------就近原则
低 浏览器默认样式
f12关于优先级的显示
默认情况下,f12中样式是按照默认优先级顺序从上往下显示
设置最高优先级 !important,比内联都高
写在某一个值与分号之间,!important与值之间有空格
color: red !important ;
注意,内联样式不允许设置!important,语义要求
选择器,规范了页面中哪些元素能够使用当前设置的样式
就是一个条件,符合这个条件的元素都可以使用这个样式
{样式声明} (匹配所有元素,但是的效率非常低,不建议使用)
例:*{margin:0;padding:0}
标签关键字{样式声明;}
div{} p{}
<元素 id=“id值”>
#id值{样式声明}
id在一个页面中不能重复,所有id选择器只被一个元素应用
使用.定义样式,哪个元素想用,用class都能调用
<元素 class=“类名”>
.类名{样式声明}
<元素 class="类名1 类名2 类名3.......">
元素选择器.类选择器{样式声明}
.类选择器.类选择器{样式声明}
.tooltip.show{}
①必须有.
②不能以数字开头
③只能包含- 或者_
v④尽量见名知意
选择器1,选择器2,选择器3.....{样式声明} #d1,.c1,div,p.c2{color:red;background-color:yellow}
通过元素的后代关系,来匹配元素
后代关系:一层嵌套或者多于一层嵌套称为后代
选择器1 选择器2 选择器3{样式声明}
通过元素子代关系,来匹配元素
子代关系,一层嵌套为子代
选择器1>选择器2>选择器3{样式声明}
子代和后代选择器可以混合使用
#d1>p span{color:red;}
匹配元素在某一个状态时的样式
只适用于a
标签的伪类
①未被访问:link
a:link{color:red}
②已被访问:visited
a:visited{color:green}
所有元素
都能用的伪类
:hover
鼠标悬停的状态
:active
激活状态
:focus
元素获取焦点时的状态(input button)
选择器权值,代表选择器的重要程度
重要程度高,优先显示
!import >1000
内联样式 1000
id选择器 100
类选择器 10
伪类选择器 10
元素选择器 1
通用选择器 0
继承的样式 无
权值的特点
width:
height:
取值:1.px为单位的数字,rem
2.% 但是如果设置高度,当前元素的父元素是body,%失效
min-width
max-width
min-height
max-height
具备属性,width和height的元素,都能设置宽高(img,table,td)
块级元素 | 行内元素 | 行内块(input/button) |
---|---|---|
设置宽高有效 | 设置宽高无效 | 设置宽高有效 |
默认宽,父元素100% 默认高靠内容撑开 |
宽高靠内容撑开 | 浏览器默认设置一个宽高 不同浏览器给的宽高不同。 一般要写兼容,css reset |
overflow:visible; 溢出部分显示,默认值
overflow:hidden;溢出部分隐藏
overflow:scroll; 带滚动条,不管是否溢出,都添加x/y轴的滚动条
overflow:auto; 自动, 不溢出就没有滚动条,溢出自动在溢出方向添加滚动条
overflow-x:scroll; 单独让x轴出现滚动条
overflow-y:scroll; 单独让y轴出现滚动条
同时设置4个方向的边框
border: width style color;
width- - - - 边框的粗细
style - - - -边框样式 solid 实线
dotted 小圆点虚线
dashed 短线虚线
doubel 双实线
color - - - -合法颜色,transparent
取消边框 border:none / 0 ;
最简方式 border: style; border:solid;
border-top: 20px solid #f00;
border-right: 20px dotted #00f;
border-bottom: 20px dashed #0ff;
border-left: 20px double #f0f;
取消某个边框
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left:0;
border-width: 100px;
border-style: solid;
border-color: #CCFF00;
border-top-width: 上边框宽度
border-top-style: 上边框样式
border-top-color: 上边框颜色
border-right-width:
border-right-style:
border-right-color:
border-bottom-width:
border-bottom-style:
border-bottom-color:
border-left-width:
border-left-style:
border-left-color:
把直角倒成圆角
border-radius:圆角的半径
取值:1.px为单位的数字
2.% 50%就是圆
单角的定义,圆角之间会相互影响
border-top-right-radius: 值;
border-bottom-right-radius: 值;
border-top-left-radius: 值;
border-bottom-left-radius: 值;
box-shadow: h-shadow v-shadow blur spread color;
h-shadow x轴偏移量
v-shadow y轴偏移量
blur 阴影模糊程度
spread 阴影大小
color 阴影颜色
inset 内部阴影
多用于修饰文本框和按钮
绘制于边框外部一圈线条,不占页面空间
一般我们会把轮廓清除掉
outline:width style color;
outline:0;
默认盒子模型计算公式:
元素占地宽度:
左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
元素占地高度:
上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距
margin:v1; 同时设置4个方向外边距
margin-top:
margin-right:
margin-bottom:
margin-left:
取值:
margin:v1; 同时设置4个方向
margin:v1 v2; v1为上下 v2为左右
margin:v1 v2 v3; v1上 v2左右 v3下
margin:v1 v2 v3 v4; 上 右 下 左 123
左右冲突,以左为准
默认布局的元素:不要用右外边距设置元素的水平位移,用左外边距设置位移
右外边距值负责控制当前元素与后面元素的距离
两个垂直边距相遇时,会合并成一个,值以大的为准
解决方案:
块级元素 | 行内元素 | 行内块 |
---|---|---|
设置宽高有效 | 设置宽高无效 | 设置宽高有效 |
默认宽:父元素%100 默认高:靠内容撑开 |
宽高靠内容撑开 | 浏览器默认设置一个宽高 |
4个方向外边距都有效 | 上下外边距无效 | 4个方向外边距都有效 改变行内块上外边距 行内块会带着同一行的其他行内元素/行内块一起位移 |
p , h1~h6 , ul , ol
body 4个方向8px
ul 上下外边距16px 左内边距40px
在特殊情况下,子元素的上外边距会作用到父元素上
特殊情况:
padding:v1;
padding:v1 v2;
padding:v1 v2 v3;
padding:v1 v2 v3 v4;
padding-top;
padding-right;
padding-bottom;
padding-left;
取值:
box-sizing:
content-box
默认值,设置的width为内容区域宽度
左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
border-box
设置的width包含(左边框+左内边距+内容区域+右内边距+右边框)
左外边距+width+右外边距
width设置百分比的时候,一般使用border-box
比较好控制
background-color : 合法颜色值; 背景颜色
background-image : url(img/02.png); 背景图片
background-repeat: repeat; 背景图片的平铺
no-repeat 不平铺
repeat-x 设置x轴平铺
repeat-y 设置y轴平铺
background-position:
取值:
background-size:
取值:
background:color img repeat position;
简写方式没有size。size需要单写
background:color / img;
background-image: linear-gradient(方向,色标1,色标2……);
取值:方向
to top
to right
to bottom
to left
色标
颜色+位置
background-image: radial-gradient(半径 at 圆心x 圆心y,色标1,色标2…….);
取值
圆心
色标
位置为%,是半径长度的%
background-image: repeating-radial-gradient(100px at centercenter,#000 0%,#0ff 2%);
-webkit- | chrome safari |
---|---|
-o- | 欧朋浏览器 |
-moz- | 火狐浏览器 |
-ms- | IE浏览器 |
字体大小
font-size: px 、rem 、 pt
字体系列
font-family:系列1,系列2,……
字体加粗
font-weight: lighter 300 normal 400 bold 600 bolder 700
字体样式
font-style:normal 没样式
italic 斜体
小型大写字母
font-variant: small-caps;
字体的简写方式
font: style variant weight size fmily; 一定按照顺序写
font: italic small-caps bold 36px "mv boli";
最简方式
font:size family;
文本颜色 color:
文本的堆砌方式
text-align:left; 左对齐
right 右对齐
center 居中
justify 两端对齐
text-align:center 的细节 : 让内部的文本、行内、行内块水平居中 内部块级元素会继承,但不会让块级元素居中
margin:0 auto;
让当前块级元素水平居中
line-height
垂直对齐方式——行高
一般会把行高设置为容器高度,让文本在容器中垂直居中
取值:
line-height:
text-decoration:underline; 下划线
overline 上划线
none 删除所有线条
line-through 删除线
首行缩进
text-indent: px为单位的数字
文本阴影
text-shadow:h-shadow v-shadow blur color;
①table
尺寸、边框、背景、文本、内外边距都有效
②td/th
高度正常使用,宽度靠内容撑
边框、背景、文本、内边距都有效 外边距无效
①td/th属性
vertical-align:top/middle/bottom
设置td/th中文本的垂直对齐方式
②table的属性
border-collapse:separate; 默认值,边框分离状态
collapse 边框合并
border-spacing:20px;
caption-side:top; 标题在表格上面
bottom 标题在表格下面
表格自动布局(默认布局) | 表格的固定布局 |
---|---|
table-layout:auto | table-layout: fixed; |
单元格尺寸会自动适应内容 | 单元格大小取决设置的尺寸 |
比较灵活 | 表格不够灵活 |
表格越大,加载速度越慢 | 任何情况,加载速度都快 |
适用于不确定每列大小并且不复杂的表格 | 适用于确定每列大小的表格 |
float:none; 默认值,不浮动
left 左浮动
right 右浮动
右浮动必须使用margin-right
进行位移
没有定义宽度的元素,脱离文档流之后,宽度靠内容撑开
元素一旦脱离文档流,会变成块级元素
清除浮动带来的影响
clear:left; 清除左浮带来的影响
right 清除右浮带来的影响
both 同时清除左右浮动的影响
解决高度坍塌
clear:both;
display:block; 让元素按照块级元素去显示
display:inline; 让元素按照行内元素去显示
display:inline-block; 让元素按照行内块方式显示
display:table; 让元素按照表格的方式显示
display:none; 隐藏,脱离文档流的隐藏
visibility:visible; 默认值,显示
visibility:hidden; 隐藏,不脱离文档流的隐藏
visibility:hidden;和display:none;的区别
visibility:hidden是不脱离文档流的隐藏
display:none是脱离文档流的隐藏
opacity:0.5; 取值0~1
0全透明,1不透明
opacity和rgba的区别
rgba只改变当前颜色的透明度
opacity元素以及元素后代所有与颜色相关的都会变透明
vertical-align:
使用场合
①表格th/td
控制内部内容垂直对齐方式 top/middle/bottom
②行内块
控制行内块前后行内元素、行内块元素、文本的垂直对齐方式
top/middle/bottom 默认值middle
③img
控制img和前后行内元素、行内块元素、文本的垂直对齐方式
top/middle/bottom/baseline 默认值 baseline基线
设置属性之后,会直接调用操作系统的默认光标
cursor:default; 默认值 小箭头
cursor:pointer; 小手
cursor:text; 提示文本输入 的 I
cursor:wait; 等待加载
cursor:help; 帮助
cursor:crosshair; 十字
list-style-type:disc; 实心圆
square; 实心小方块
circle;空心圆
none; 去除列表标识项
list-style-image:
list-style-position:outside; 默认值,在li外侧显示列表标示
inside; 在li中显示列表标识
简写方式
list-style:type URL position;
list-style:none; 最简方式,清除列表标识项
相对定位、绝对定位、固定定位
position:static
默认值 默认文档流
relative
相对定位
absolute
绝对定位
fixed
固定定位
注意:元素一旦设置了position,并且取值为relative/absolute/fixde其中一种时
position:relative;
配合偏移属性
不脱离文档流,不影响周围元素
如果一个元素设置了相对定位,并且不写偏移属性,这个元素对页面没有任何影响
如何偏移:相对自己原先位置偏移
使用场合:
①做元素位置的微调
②作为绝对定位的祖先级已定位元素
position:absolute;
配合偏移属性
绝对定位,脱离文档流
如何偏移:
①如果元素没有已定位的祖先元素,绝对定位元素相对body左上角进行偏移
②以“最近的”“已定位的”“祖先级”元素左上角做偏移,子绝父相
使用场合:页面布局中使用,可以让页面移动到页面的任何位置
position:fixed;
配合偏移属性
如何偏移:相对于body左上角
使用场合:把元素永远固定在页面可视区域的一个位置
z-index:
注意事项
文章浏览阅读4.5k次。一、介绍Redis 集群是一个提供在多个Redis间节点间共享数据的程序集.redis3.0以前,只支持主从同步的,如果主的挂了,写入就成问题了。而官方的Redis Cluster出来后就可以很好帮我们解决这个问题;可以做到节点的自动发现、集群容错slave->master、人为操纵分片(slots)等等Redis Cluster 架构架构细节:_redis3.0cluster部署
文章浏览阅读1.6k次,点赞2次,收藏7次。最近在arxiv上又看到了一篇论文,出自清华大学。题目为:All NLP Tasks Are Generation Tasks: A General Pretraining Framework。0.摘要NLP任务分为分类或者说是阅读理解任务(NLU)、无条件生成任务、有条件生成任务;预训练模型分为自编码、自回归、编码解码。三种训练模型分别在前面三种任务中表现良好。本文中提出一个通用的预训练模型,在三种任务中都能做到良好表现。 ..._all nlp tasks are generation tasks: a general pretraining framework
文章浏览阅读199次。TextView里限制输入字数的方法2011-05-12 10:50 8353人阅读 评论(0) 收藏 举报联想 一开始采用的方法是函数textView:shouldChangeTextInRange:replacementText:来进行判断:[c-sharp] view plaincopy //键入Done时,插入换行符,然后执行addBookmark - (BOO
文章浏览阅读1.2k次。问题描述 安装MarkdownPad2后打开一个markdown文档,在预览markdown文档出现下面错误:问题分析 官方的文档给出如下说法:This issue has been specifically observed in Windows 8. You may see an error message as shown here, and no HTML will be rendered when you type in the Markdown Editor pane.To fix _还原 markdown 预览时出现意外错误。
文章浏览阅读629次。系统版本:centos7.9-2009nginx版本:1.20.21、去nginx官网下载压缩包,此处选择稳定版本nginx官网链接2、上传到服务器指定位置/opt/tools,根据个人习惯来解压:tar -zxvf nginx-1.20.2.tar.gz3、配置,使用默认配置解压后进入到nginx目录下,执行:./configure可能会出现一些错误提示错误1:./configure: error: C compiler cc i.._centos编译nginx 1.25
文章浏览阅读106次。这里记录下influx控制台的简单使用,如需更多功能请参考InfluxDB官方文档:https://docs.influxdata.com/influxdb/v1.1/ 环境: CentOS6.5_x64InfluxDB版本:1.1.0 准备工作 启动服务器 执行如下命令:..._influxdb控制台怎么打开
文章浏览阅读91次。Title: Application Developer Location: Shenzhen,China..._application developer是干什么的
文章浏览阅读712次。进制转换 Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other)Total Submission(s) : 14 Accepted Submission(s) : 12Font: Times New Roman | Verdana | Georgia Font Size:_hdoj进制转换
文章浏览阅读1.4w次,点赞18次,收藏88次。一维激波管(Lax shock tube)问题的数值求解文章目录一维激波管(Lax shock tube)问题的数值求解@[toc]问题描述一般的守恒算法格式精确解常用守恒格式(先介绍标量)Lax-Friedrichs格式Roe格式Lax-Wendroff格式ENO格式简介(先介绍标量)5阶WENO格式空间离散Lax-Friedrichs通量分裂原函数方法重构左值右值空间算子和时间三阶Rung..._一维激波管大作业
文章浏览阅读222次。appserv访问http://localhost/phpMyAdmin 没有响应的问题 只需要修改hosts文件就好了 在C:\Windows\System32\drivers\etc文件夹下有个hosts文件, 用记事本打它,去掉倒数第二行(当然不一定都是这个位置,只要..._phpmyadmin localhost 发送的响应无效
文章浏览阅读387次。下面转载一篇虚拟机遇到“vmware安装无法打开内核设备 \.\Global\vmx86: 系统找不到指定的文件”问题的解决办法*****问题原因:是虚拟机服务没有开启解决方法:(以管理员的方式运行)点击“开始→运行”,在运行框中输入 CMD 回车打开命令提示符,然后依次执行以下命令net start vmcinet start vmx86net start VMnetuserif..._无法打开内核设备“\\.\global\vmx86”: 系统找不到指定的文件。您在安装 vmware
文章浏览阅读52次。字典节点。key/value结构。 typedefstructdictEntry{void*key;union{void*val;uint64_tu64;int64_ts64;..._redis字典这个数据结构,除了主数据库的k-v