文字颜色 color是给文字设置颜色,b
的都是以下四种写法
1.div独占一行2.伪类选择器放中间怎么样 一.我设置了定位,发现独占一行的div一行上也可以有别的元素,所以独占一行是是啥意思? 个人认为独占一行是块状元素独占浏览器他的宽度那一行,当写在块状元素后面的元素,没写定位时,所有的标签都会放在下一行,但是当设置定位就不是了。
span不会独占一行,定位定到哪都可以,独占不独占都是指当没写定位的时候,标签后面的怎么样,span这种都是会都一行后面,而块状是下一行。行内块元素不独占一行。
二.伪类选择器不存在放中间这种,都是放选择器最后,放中间好像失效了。
复合选择器 后代选择器:找到父选择器的所有子代,第一级,第二级...子要是包括在父标签就行。
子代选择器:选中最近一代子代进行,和只有一个一样都是找到标签。,可以写多个选择器>选择器>选择器,会依次找。
并集选择器:选择器1的标签+选择器2的标签等都设置该样式
交集选择器,满足所有选择器要求的标签设置。标签和通配符必须放前面。
复合选择器中的基础选择器也是可以找到标签的只是它就是要经过这种找第二次。
伪类选择器 写在选择器后面会找到对应标签,在标签是该状态下显示样式,不是该状态不显示该样式。不写这种状态的选择器的样式/默认样式会被伪选择器样式覆盖。伪选择器样式也是有选择器之间的覆盖。伪选择器有五个还有一个focus获得焦点,但是普通的只有三个,没有link和visted。如果是同等的选择器中的状态,先后顺序需要是LVHA/VLHA,访问前,按下和悬停前的状态,只是显示出的状态,visited是悬停/点击及之后的的状态,需要放到前面。悬停包括按下。link可以写在任意位置。我们这些样式只在对应时机显示,不是对应状态不会显示,当不显示时,就是设定的/默认的。伪类选择器其实在特定时机去覆盖。相同属性就覆盖,不同的仍保持。
伪类选择器四个状态写的同类选择器的顺序LVHA(love+hate)
首先鼠标悬停,可能访问后悬停也可能未访问悬停在这表示悬停的样式,访问前包括访问前的一切状态包括访问前悬停都会被link设定,我们让hover在link后面样式会覆盖。所以访问前link需要写在hover前面,visited同理。hover要写在active前面,是点击时鼠标仍是悬停在标签上的。悬停也会设置点击时的样式,因为点击时也是悬停的。所以active写在hover后
。所以可以是LVHA/VLHA。
CSS选择器的三大特性 继承性 我们最后经过style会给标签设置样式,找到对应标签设置样式,给对应标签设置样式时,还会看子标签(内部所有标签)都会设置父类的样式,只是看能不能覆盖,父类是最弱的,所有只有原本没有的父类才能给它设置。
层叠性 对应标签而言设定css时,对于某一个设定,如果看选择器时,如果是同种类型的选择器,无论是什么选择器,多个对于同一个/同一群标签的选择器都是起作用的,只是起作用时,如果是对某一群标签的同一个属性起作用,则是同一个选择器,后面的选择器内同一个属性会覆盖前面的选择器内的属性。
优先性 我们给标签设置样式时,无论你写了多少个标签选择器,即使都会对某一个标签起作用。都会设定,只不过时自上而下依次执行,会存在优先性是否能覆盖。
选择器起作用的前提是没有内部样式,内部样式最高的。第二是,设定的标签是选择器内的important且这个选择器就是对该标签。第三层是选择器的比较,选择器的比较无论是复合选择器还是基础选择器都是一起比较(id选择器,类选择器,标签选择器)从左优先,那个数量多就是那个优先。
第四层是对父标签的设定会继承到子类标签,无论父类是内部样式亦或其他比如设定的important只是对选择器锁定的标签除却内部最优先。
Emmet写法 对于CSS和HTML内部简写
CSS可以写首字母直接接属性值无需带单位,但是如果是颜色写数值需要带#,CSS有
w100+h100会生成长宽都100px的代码。需要1写数值要不不能回车生成。
对于HTML有下面几种对于HTML的第一二最后一行都是标签不能写()失效,这些生成都比较符合先乘除后加减,从左往右啥的。div对于第一二行可以不写div会生成div的。
背景有关属性 background-image设置背景图
属性值是url(地址),地址就是src会找的地址。只设置背景图,浏览器默认设置平铺方式是平铺repeat,会将初始位置的图片复制,让整个标签都被该图片覆盖。初始地址是左上角。
background-repeat设置平铺方式
属性值有以上四种,自上而下表示不平铺只有初始照片,/平铺覆盖整个标签,/水平方向平铺,初始图片左右平铺/垂直方向平铺。
background-position设置初始图片的位置
属性值可以是关键字bottom top center left right 等也可以是数字。可以写两个关键字/数字以空格隔开,第一个是水平方向,第二个是垂直方向只是针对数字,如果是关键字可以第一个写垂直方向,都可以,或者关键字+数字也可以随便写第一个/第二个。但如果只写一个的话,不懈的默认是center,如果只写一个数字是水平方向的,垂直方向默认是center,写的数字,是照片的上线和左线离标签上线和左线的距离,如果是正的,往下往右,如果是负的,往上,往左。需要带单位
background-size控制初始图片的缩放
值有关键字cover,contain,contain表示在初始图片的位置等比放大到宽/高和标签一个相等。
cover放大到初始照片覆盖标签所有内容。但是会有一部分不显示。背景图只在标签内显示。
值也可以是一个数字/两个数字,如果写一个数字表示宽。可以百分比,表示缩放到占标签宽的多少百分比。如果是auto值一个表示图片原有尺寸,只设置一个,高度等比例的高度,如果设置两个都为auto,就是原始尺寸。第一个auto是原始尺寸,第二个auto无论前面写什么都是等比例的意思。以空格隔开。
background-attachment背景图固定
设置该值,会让背景图固定,元素会随着滚轮动,但是背景图固定的,背景图只会设置滚轮没有滚动时的视图。即使你是平铺。
background背景复合属性 该属性值时这种写法,和font一样的只不过font有顺序且一定得有字体字号,这里不是,顺序随意,但是都是以空格隔开。复合属性的值都是单个属性的属性值写在这。
显示模式
所有的标签都是有显示模式的,当你不设定显示模式时,他们都是按这个显示模式执行。所有标签的宽和高都是编辑决定的,不会用户输入改变。
我们可以设置转换显示模式,比如div,写了就有这种模式是原本携带的,因此改变就会和其他显示模式一样。
行内块设置文本位置text-align有用的,行内块有盒子的,但是对外是行内元素,外部设计的都是对于页面一行而言。
块级元素,父亲和自己设置文本的水平对齐,都是对于盒子,有盒子,不是被撑大,可以设置长宽。
行内元素,无法设计高宽,所以,父亲和自己设置文本的水平对齐都是对于页面那一行来说
写在以免一行右边,可以是块级盒子,一整行盒子,设计在盒子右边,也可以是行内,行内块。如果是块级设置页面右边,必须块级元素的盒子宽是100%。