CSS知识点


CSS

CSS叫做“层叠样式表”

网页中:HTML相当于布料(结构)

CSS网页相当于上色(美化)

样式如何显示HTML元素

样式通常存储在样式表中

把样式表添加到HTML元素里

定义css的方式

行内样式,内联样式(了解)

I Love Java

 

如:

I Love Java

 

如果当前的样式不需要复用,可以用航行内样式

如果涉及优先级需要行内样式

内页样式(了解)

在当前页面声明一个样式(给样式起个名字,如果有人想要使用或者修改,直接用这个名字就行了 在style里写)

(1)标签选择器

p{

background:red

}

(2)类选择器

声明样式的时候需要用一个英文的点,使用的时候不用

.p{

background:red

}

(3)id选择器

声明样式的独有标记”#”,使用时同样没有

#p{

background:red

}

外部样式(推荐)(l了解)

CSS的选择器(了解)

1.标签选择器(了解)

2.类选择器(了解)

3.id选择器

4.组合选择器(可以选多个)

div,p{

}(div与p两个标签的样式一摸一样的,选中div和p)

5.后代选择器(不管嵌套多少层,都能选到)

div p{

}(选中div里面的p)

6.直接子标签选择器(选儿子,不选孙子)

div>p{

}

7.选紧跟在div后的p

div+p{ }

8.属性选择器

type=text{

}

=文本框永远只有一行

文本区可以换行

9.

[type~=t]{

}(包含某个单词的所有元素)

10.伪类 选择器

a link{

}

a hover{

}(鼠标悬停)

a:action{

}(元素被激活)

a:vistted.{

}(点过的链接)

nth-child(): 选中第几个

checked:选中所有被选中的元素

css层叠性(没听懂)

优先级

类>标签>id

层叠性

如果样式冲突,遵循就是就近原则,哪个样式离结构近,就选哪个

如果样式不冲突,就不层叠

继承性

子标签会继承父标签的某些样式

*权重:继承的样式权重为0(继承过来的样式是最不重要的,优先级最低)

行内样式权重最高

如果权重相同,继续就近原则

!important 可以改变权重,改成无限大(比行内样式还要大)

css常用的单位:

1.px像素(绝对单位 一个像素代表一个点,如一个100px*100px的正方形,宽度100个点,高度100个点)

2.em(相对单位,它会参考它的父级元素。在字体上使用比较多,父级元素的字体是16px,要设置元素的字体大小为2em,当前元素的字体大小就是32px。

3.rem相对单位,由页面决定,当我们该百年来浏览器的页面设置,页面的字号也会随之发生变化。应用在老人版。

4.百分比,相对于父级元素的比例

字体大小:font-size:像素

字体样式:font-family:字体名字

行高:line-height:~~~px

粗细:font-weight:

字体下划线:text-decoration:underline/none

字体颜色:color:

*如果样式很多,每个样式后用;结尾

背景

div可以理解为一张纸,不对其进行任何设置就是一张透明的纸

背景颜色:background-color

背景图片:background-image

简写:background:

颜色的表示方法:

1.英文 2.rgb(是一个函数) 3.rgba:多加了一个透明度(透明度0-1 全透明-不透明) 4.16进制

边框

边框线样式:border-style:dotted;

边框线的宽度:border-width:Spx;

边框线的颜色:border-color:

简写:border:

区块属性

显示方式:display:(block块 inline行 none不显示)

行:不能换行 块:能换行,能设宽高 行级块:不能换行,有宽高

盒子模型:去进行网页模型的

width height:表示内容区的宽和高

margin:外边距,距离上一个元素的位置

padding:内边距,本元素内部空出的距离

border:边框线

定位

position: absolute:绝对定位 当前的文档流可以理解为飘起来了,参照物是他的父级元素

relative:相对定位 :参照物是已经定位的父级元素,占原有位置,不会上天,父相子绝

          static:文档流(默认)    

fixed:浮动

visibility:hidden:隐藏

overflow:溢出样式

scroll:滚动条

浮动

浮动的元素会脱离原本的文档流,会造成父元素的高度坍塌

包围图片和文本的div不占据空间,使用了浮动的元素,导致后面的元素错乱

感想:感觉很多东西比较难理解,看着老师敲代码,跟着思路走还可以,但是自己去进行设计完全没有思路。

原创文章,作者:3628473679,如若转载,请注明出处:https://blog.ytso.com/273710.html

(0)
上一篇 2022年7月12日
下一篇 2022年7月12日

相关推荐

发表回复

登录后才能评论