网站首页 网站导航 课程中心
新闻中心
您所在的位置:Web前端培训 > 新闻中心 > 【web前端培训】css基础篇(二)

【web前端培训】css基础篇(二)

来源:中软卓越 日期:2018-04-27 15:11 人气:
标签:
中软国际教育集团Python+大数据课程入驻大武汉啦!!!
四、css选择符分类 

首先来看一下css选择符(css选择器)有哪些? 
1.标签选择器(如:body,div,p,ul,li)

   
2.类选择器(如:class=”head”,class=”head_logo”)

   
3.ID选择器(如:id=”name”,id=”name_txt”)

   
4.全局选择器(如:*号)

   
5.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)

   
6.后代选择器 (如:#head .nav ul li 从父集到子孙集的选择器)

   
7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

   
8.继承选择器(如:div p,注意两选择器用空格键分开)

   
9.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)

10.字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)

   
11.子选择器 (如:div>p ,带大于号>)

   
12.CSS 相邻兄弟选择器器 (如:h1+p,带加号+)

五、css优先级 
 
当两个规则都作用到了同一个html元素上时,如果定义的属性有冲突,那么应该用谁的值的,CSS有一套优先级的定义。 
不同级别 
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。 
作为style属性写在元素内的样式 
id选择器 
类选择器 
标签选择器 
通配符选择器 
浏览器自定义或继承
总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别 
同一级别中后写的会覆盖先写的样式 
注意点: 
  ①、!important的优先级是最高的,但出现冲突时则需比较”四位数“;
  ②、优先级相同时,则采用就近原则,选择最后出现的样式;
  ③、继承得来的属性,其优先级最低;
  !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
  *css选择器使用强烈建议采用低权重原则,利于充分发挥css的继承性,复用性,模块化、组件化。 

多重样式优先级 
内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式


常见的链接样式 
a:link {text-decoration:none;} 
a:visited {text-decoration:none;} 
a:hover {text-decoration:underline;} 
a:active {text-decoration:underline;} 
* a:link - 正常,未访问过的链接 
* a:visited - 用户已访问过的链接 
* a:hover - 当用户鼠标放在链接上时 
* a:active - 链接被点击的那一刻

块级元素(block)特性: 
* 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 
* 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; 

内联元素(inline)特性: 
* 和相邻的内联元素在同一行; 
* 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小; 

块级元素主要有: 
* address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li 

内联元素主要有: 
* a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var 

主要用的CSS样式有以下三个: 
* display:block – 显示为块级元素 
* display:inline – 显示为内联元素 
* display:inline-block – 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性,我们常将ul元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。(部分浏览器不兼容) 

css伪元素 

 

 
六、让DIV垂直居中多种方法: 
 
1、
body{text-align:center;vertical-align:middle}
2、实现绝对定位元素的居中
.style{margin:0 auto;}
3、div绝对定位水平垂直居中【margin 负间距】
.autoDiv{position: absolute;left:50%;top:50%;margin-left:-width/2;margin-top:-height/2;}
4、div绝对定位水平垂直居中【Transforms 变形】
div{ width: 200px; height: 200px; background: green; position:absolute; left:50%; /* 定位父级的50% */ top:50%; transform: translate(-50%,-50%); /*自己的50% */ }
5、css不定宽高水平垂直居中
.box{ height:600px; display:flex; justify-content:center; align-items:center; /* aa只要三句话就可以实现不定宽高水平垂直居中。 */ } .box>div{ background: green; width: 200px; height: 200px; }

Flex布局: 
容器的属性有哪些(最外层父容器Box) 
flex-direction: row | row-reverse | column | column-reverse; 
flex-wrap: nowrap | wrap | wrap-reverse 
flex-flow:: || ;flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。 
justify-content: flex-start | flex-end | center | space-between | space-around定义了项目在主轴上的对齐方式 
align-items : flex-start | flex-end | center | baseline | stretch;(垂直对齐方式定义项目在交叉轴上如何对齐。) 
align-content:flex-start | flex-end | center | space-between | space-around | stretch;定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。 

项目的属性item 
order:;定义项目的排列顺序。数值越小,排列越靠前,默认为0。 
flex-grow: ; /* default 0 */定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大 
flex-shrink: ; /* default 1 */定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小 
flex-basis: | auto; /* default auto */flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小 
flex:none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选 
flex:放大,缩小,分配多余空间 
align-self :auto | flex-start | flex-end | center | baseline | stretch; 
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

中软卓越是中软国际有限公司投资的大型人才服务机构,是中软国际人才战略的核心组成部分之一,承担集团发展过程中人才储备和培养的任务,是软件及外包业务快速发展的重要人才支撑平台,是集团保持高速增长动力之一。

中软国际教育集团专注IT教育36年,一直秉承“用良心做教育”的理念,是中国移动互联网研发人才一体化服务的开拓者,全力打造移动互联网研发人才服务优质平台。

公司总部位于武汉,目前已在深圳、上海、郑州、广州、大连、武汉、成都、西安、杭州、重庆、长沙、合肥、无锡、南宁、厦门、南京、南昌等全国22个省成立了60多家分公司。拥有全国的移动互联网教学就业保障团队,做到了毕业学员业内高薪水,成为学员信赖的IT培训机构。

营业执照 版权所有©Copyright 2008-2017,武汉中软卓越科技有限公司 , All Rights Reserved. ICP备案号:15018648号-1

sitemap | 来校路线 | 分类导航 | 关于我们