css前端知识点总结_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:15:51
Original
868 people have browsed it

1、css的概念:(CascadingStyleSheet级联样式表)

优点:1.内容与表现分离。(用网页的内容xhtml就可以与表象分开)

     2.表象统一

     3.丰富的样式

     4.减少网页代码

     5.运用独立于网页的css

2.选择器

 1.标签选择器

   标签名{属性:属性值;}

2.类选择器

  .类名{属性:属性值;}

标签内容标签名>

 

3、id选择器

  #ID名称{属性:属性值;}

4.并集选择器

 标签名,.类名,#ID名称{属性:属性值;}

5.后代选择器

 后代选择器的写法是把外层的标签写在前面,内层的标签写在后面,之间用空格分开。当标签发生嵌套时,内层的标签就成为外层标签的后代。

P span{ 属性:属性值;}

标签内嵌套标签。

标签的后代,两者之间用空格隔开

  6.交集选择器(注意:交集选择器之间没有空格)这种可以确定是某一个标签

     标签名.类名{}

  7.全局选择器

   *{样式;}

Css中的注释只能是 /* 注释 */形式;

3.在HTML中引入css样式的方法

   1.行内式,

  

2.嵌入式,

将样式写在head中

H1{font-size:18px;}

3.导入式与链接式,(外部css样式)

链接式:

导入式:

 

两者的区别是:链接是先加载样式后加载页面,导入是反之

4.样式的优先级

基本选择器之间:ID选择器>类选择器>标签选择器

样式表之间:行内样式>内嵌样式>外部样式

Css样式之间:在同一个选择器中,两条相同的声明,后一条声明会覆盖前一条声明,

5、盒子模型

 盒子模型总尺寸=border-width-padding+margin+内容尺寸(宽度或高度)

6、浮动属性

 Float:值(left,right,none,inherit(IE不支持不推荐使用))

 与float属性结合使用的另一个属性clear,用于确定元素的那一侧不允许其他浮动元素,clear属性的值有5个,如下所示:

 Left在左侧不允许浮动元素

Right:在右侧不允许浮动元素

Both:在左右侧均不允许浮动元素

None默认值,允许浮动元素出现在两侧

Inherit:规定应该从父元素继承clear属性的值,IE浏览器不支持,不推推荐使用。一般用于清除浮动时,使用both属性值的情况较多,即:

 Clear:both;

7、定位属性:

 1.绝对定位

position:absolute; z-index:2;(堆叠次序)

background-color:背景色。Transparent表示透明的背景色

background-attachment:确定背景图片是否跟随类容滚动,设置为fixed为固定的,scroll为滚动;

2.相对定位:position:relative;

8、控制元素显示方式

1.显示方式 display:值

2.处理盒子中的溢出:overflow:值

3.设置光标的形状:cursor:pointer(小手)

 

4.超链接样式:

  a:link{color:#ff0000;}  //未访问的链接

  a:visited{color:#00CC00}//已访问的链接

  a:hover{color:#000FF}//鼠标指针移动到链接上

      a:active{color:#FF00FF}//选定的链接

  定义样式必须是:linkàvisitedàhoveràactive

经验:内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立。

display:block;转换为块级元素;

 

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!