css初了解总结

177 阅读4分钟

css初接触总结

css概念

  • css称为层叠样式表(Cascading Style Sheet)

css的作用

  • css是用来给美化网页的,使用css使网页看起来更加美观、布局更加合理

css怎么用

  • css的用法分为三种分别是: 1:行内式:主要是在标签内直接写入css样式,这样写的css会使代码看起来更加复杂,在后期需要更改的时候更加难以找到,一般在后期js时会使用行内样式

2:内嵌式:内嵌式css可以写在hend标签内也可以写在hend标签外,但是一般情况下都是写在hend标签下的,内嵌式写法可以使html代码与css样式进行上下式分离,使代码看着更加工整。也是常用的写法之一

3:外部链入式:外部链入式是在html代码页面之外独立一个css属性页面,通过link标签链入进来,这样能使代码更加干净明了。

css常见的选择器

  • css常见的选择器分为: 1:通用选择器:通用选择器使用*符进行选中,会选中所有的标签进行附加属性

2:属性选择器:属性选择器使用[]符进行选中,会选中所有同样属性的标签对里面的内容进行附加属性

3:类选择器:类选择器分为两步:首先给元素使用class进行添加一个类名,让后使用“.”符号选中所起的名字进行附加属性

4:Id选择器:Id选择器也分为两部:首先给元素使用id进行添加一个id名,然后用#选中id名对选中的属性进行附加属性

5:后代选择器:后代选择器是选中一个标签下所有的后代一般格式为前面是标签名后面是要选中的标签名,中间用空格隔开,后代选择器会选中一个标签下所有的子代标签,不管子代标签隔了多少个标签。

6:交集选择器:交集选择器通过第二次的筛选会选中同时具有两个属性的标签,能够更加精准的选择所需要选择的目标

7:并集选择器:同时选中多个标签,可以快速给具有同样属性的标签进行附加属性,每个属性名之间使用“,”隔开。需要注意的是逗号是英文的逗号

8:hover选择器:这是用来选择一个不存在的属性的选择器,多用来给鼠标放上去提示的文本附加属性

9:兄弟选择器:兄弟选择器是在保证同级的情况下使用,选中标签然后加上"+"号符就可以选中下一级的标签,也可以使用"~"符号选中除自己以外的同级元素

10:元素选择器:元素选择器可以直接写元素的标签名,就能选中元素从而进行附加属性

css中颜色的表示方法

  • css中颜色的表示方法有三种,分别是: 1:直接使用英文单词进行颜色附加,优点:好记 缺点:单词就那么几个,颜色有限,不推荐使用

2:使用rgb三原色进行颜色属性添加r代表红色,g代表绿色,b代表蓝色,注意rgb最高为255。

3:使用16进制进行颜色属性添加,十六进制分别为0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f,16进制前面使用#符开头。

css属性

  • font-size属性:用来给文本设置大小,每个浏览器都有默认文字大小,常用的设置大小的方式为xxxpx或者这只百分比

  • font-family属性:用来设置文字的字体名称。例如“黑体”一般都有默认字体,可以不设置

  • font-weight属性:用来设置字体的粗细,normal约等于400和bold约等于700,一般情况下只会选择加粗或者正常。

  • font-style属性:用来设置文字的显示样式,有常规和斜体显示使用normal设置为常规选项,italic设置为斜体显示

  • lin-height属性:用来设置字体在一行中所占的高度,在网页精确布局是设置lin-height=1px会取消文字的上下边距。

  • font属性:font中的所有属性可以简写为font后面加上属性名,简写时具有一定的格式并且必须要有size和family 并且不可调换顺序

  • text-align属性:用来设置文字的显示位置,center表示居中,left表示文字向左对齐、height表示文字向右对齐、

  • text-indent属性:用来设置文字首行缩进,一般使用em表示,text-indent="2em"就是首行缩进两个字符