技术标签: 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:
注意事项
文章浏览阅读438次。web应用托管Note that around the exact time of this article’s publication, FusionInvoice 2 was released as commercial software, and is based on Laravel instead of CodeIgniter like previous versions. It is,..._]fusion怎么处理电子(非纸质)发票?
文章浏览阅读252次。react 组件添加样式Let’s say you’d like to add a CSS Modules Stylesheet to your project. You can find Create React App’s guidance here, but essentially — and as the guidance states — CSS Modules let you use ..._react在自定义的组件上增加样式类
文章浏览阅读510次。by YK Sugi 由YK Sugi 如何在Google和其他高科技公司获得软件工程师职位 (How to Get a Software Engineer Job at Google and Other Top Tech Companies)Hi everyone! 嗨,大家好! I’ve already talked about how I personally got a softw..._获得谷歌的软件工程师职位英语
文章浏览阅读3.5k次。steam密码查看Steam lets you set your name to anything within its terms of service. This can make it difficult to find people—even if they’re already on your friends list. Find out who’s who by checking al..._steam密码查看
文章浏览阅读1.3k次。错误:Caused by: java.lang.ClassCastException: scala.collection.mutable.WrappedArray$ofRef cannot be cast to java.util.List分析:这个问题,一般是在sparksql中做row转换时候出错,最好一步步排错。这里要说的是, row:Row是先做了一次强制类型转换(asInstanceOf),row的实际类型是Seq[T],但是不能用Array[T],否则就会出现各种scala和java的类_scala.collection.mutable.wrappedarray$ofref is not a valid external type for
文章浏览阅读1.3k次。kconfig 介绍 (Intro)Every Linux professional write scripts. Someеimes light, linear. Sometimes complex script with functions and libs(yes, you can write your bash-library for use in other scripts). 每个..._kconfig 应用程序
文章浏览阅读1.5k次。excel批量制作条形码A bar chart (or a bar graph) is one of the easiest ways to present your data in Excel, where horizontal bars are used to compare data values. Here’s how to make and format bar charts in Mi..._excle chartbar add number
文章浏览阅读1.1k次。引言点击下面卡片,关注我呀,每天给你送来AI技术干货!来自:复旦DISC目前在各种推理任务中,预训练模型都取得了不错的效果,展现了一定的隐式推理能力,然而大多数工作的推理过程还是不透明的。..._向量表示推理的推理方法赋予可解释性
文章浏览阅读2.8k次,点赞2次,收藏2次。golang 转换为字符串In Golang, fmt.Println(err) can print out the error err. But how to convert an error to a string explicitely? 在Golang中, fmt.Println(err)可以打印出错误 err 。 但是如何将错误显式转换为字符串 ? In Go, the error t..._golang中错误转换为字符串的方法
文章浏览阅读4k次。解决正在等待响应 背景 (Background) On occasion, I’ll see waits that exceed what I expect well above normal and a few of them have some architecture and standards to consider following when troubleshooting, ..._正在等待某某某的响应
文章浏览阅读2.1k次。outlook邮件恢复字体Outlook 2013 allows you to customize the font used to display the sender’s name, subject, date received, and size of each message in your message list. Maybe you want to just change the s..._how to change the font size of outlook
文章浏览阅读285次。Recently we had to add support for social networks login to an application we are developing and we chose django-social-auth to work with. It is a well documented and easy to use django application fo..._django social auth