前端前端都会去了解的Web前端之路

一些标签

2017-06-11  本文已影响29人  诗远同学

css介绍

css指的是层叠样式表,英文全称:Cascading style sheets

css的作用是负责网页的样式;

它有一个很重要的特点就是可以给任何标签写任何样式属性;

【体验css】

《css的文字控制三属性》

font-size ---修改文字字号;没有限制(需要加上单位);

color ---颜色;

font-family ---字体;

text-align ---文字水平对齐方式;

【css语法】

1、要求所有的css代码写在一对style标签内部,表示css的书写环境,style标签需要放到head标签内部;

2、css属性的基本格式:css属性的键值对格式是:k:v;例如:color:red;多个属性之间用英文分号隔开;

注意事项:style标签有一个配合使用的属性:type=”text/css”作用是保证浏览器兼容性;

选择器是什么?

选择器指的是选中标签的不同方式;

【盒子特性】

《盒子标签》

div标签---没有固定定义,就是一个容器,大盒子,它可以用来存放任何内容盒标签;主要作用是给网页布局分区;

span标签---也是一个容器,小盒子,它经常用来存放文字或者小图片,(语义跟div对比较轻;)

《实体化三属性》

实体化指的是给一个标签划分区域(画盒子);

实体化三属性:

width ---宽度;

height ---高度;

background ---背景;

《标签的显示模式》

所有的标签都会有两种特点:一种是独占一行,可以任意指定尺寸;一种是多个排列在一行,不能指定尺寸;

这两种特点专业的称之为标签的显示模式(display):

1、块级标签,典型代表是div,特点是独占一行,可以接受人为尺寸;

2、行内标签,典型代表是span,特点是多个可以在同一行排列,不接受指定尺寸;

为什么会有这两种特点,是所有的标签都会有默认的display属性值:

块级标签默认的显示模式是:display:block;

行内标签默认的显示模式是:display:inline;

css中有一种显示模式具备行内和块级的特点,它是行内块:display:inline-block;

它既可以接受人为尺寸,也可以多个排列在一起;

总结:

标签的显示模式有三种:

1、块级标签;2、行内标签;3、行内块标签;

《css的内外边距属性》

内边距:padding

外边距:margin

《块级标签总结》

div , h , p , ul>li , ol>li , dl>dt+dd , table>tr>td

《行内标签总结》

span , a , strong , img , input , textarea

【边框属性】

《border属性》

border表示边框,它有多个值,值与值之间用空格隔开;

基本结构:border:粗细 类型 颜色;

边框类型有三种:solid实线;dashed虚线;dotted点线;

《知识点》

标签的边框由上右下左四个方向组成,可以单独设置某个方向的边框;

例如:border-top: 1px solid #000;

四个方向: top right bottom left;

边框的本质:一个标签中有三个边,外边距,border,内边距;

【css中的文字控制属性】

简介:我们学习css可以分为两大部分:一部分是css属性(核心),另外一部分是选择器;css属性又可以分为两大部分:文字控制属性;区块控制属性(背景,边距等等);

《css的bui属性》

font-weight: bold;加粗;

normal正常;

text-decoration: underline;下划线;

line-through;贯穿线(删除线);

overline;上划线;

none;清除划线;

font-style:italic;斜体;

【css选择器】

在css中我们可以给标签名两种名称:

一种是类名:通过class属性命名,例如:class=”box”;特点:可以应用给多个标签;

一种是id名:通过id属性命名,例如:id=”myid”;特点:唯一,一个id名称只能应用给一个标签;

《书写关系》

类名的使用是通过.类名,例如:.box{ };

id名是通过#id名称, 例如:#myid{ };

命名规范:

选择器命名都不能数字开头;

《清空默认边距》

简介:标签当中有些标签是默认带有边距的,而在实际项目当中,我们需要对这些默认边距进行清除;

方法就是使用一个新的选择器—通配符:*(星号)它的作用是选中包括body的所有标签;

清空的时候需要清空三个属性:margin,padding,border都设置为0即可;

【基础选择器权重】

标签选择器,类选择器,id选择器,通配符统称为基础选择器;

权重指的是如果一个标签有多个选择器哪个生效?

基础选择器中,谁的针对性越强谁的权重就越高!

id选择器>类选择器>标签选择器>通配符选择器;

【盒子对齐方式】

简介:在css中,有两种类型的对齐方式,一种内容对齐,一种是自身对齐;

《盒子水平居中方式》

让一个标签水平居中的方式是设置它的左右外边距为auto即可; 如果单独设置margin-left:auto;可以让盒子右对齐;

《内外边距的简写方式》

一个值:四个方向都是一样;

两个值:上下和左右的距离;

三个值:上和左右和下的距离;

四个值:按顺时针分布,上右下左;

上一篇 下一篇

猜你喜欢

热点阅读