首页 > 网页制作 > 心得技巧 > 正文

css前端知识点总结(必看篇)_心得技巧_网页制作

2018-12-01 21:00:40

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

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

2.表象统一

3.丰富的样式

4.减少网页代码

5.运用独立于网页的css

2.选择器

1.标签选择器

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

2.类选择器

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

<标签名 class=”类名”>标签内容</标签名>

 

3、id选择器

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

4.并集选择器

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

5.后代选择器

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

P span{ 属性:属性值;}

<p>标签内嵌套<span>标签。

<span标签是><p>标签的后代,两者之间用空格隔开

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

标签名.类名{}

7.全局选择器

*{样式;}

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

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

1.行内式,

<h1 style=”font-size:18px”></h1>

2.嵌入式,

将样式写在head中

<style type=”text/css”>

H1{font-size:18px;}

</style>

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

链接式:

<link href=”style.css” rel=”stylelensheet” type=”text/css”/>

导入式:

<style type=”text/css”> @import”style.css”;</style>

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

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;转换为块级元素;

以上这篇css前端知识点总结(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

原文地址:http://www.cnblogs.com/izhongwei/archive/2016/06/09/5572443.html

  • 相关标签:心得技巧
  • 本文发布HTML5中文学习网 ,转载请注明出处,感谢您!
  • 相关文章


  • 曝网友假装外国人写投诉信 ofo秒退押金并回函致歉
  • 苹果市值缩水逾2000亿美元 遭多家投行下调目标价
  • Asp.net Core与类库读取配置文件信息的方法_实用技巧
  • asp.net在Repeater嵌套的Repeater中使用复选框详解_实用技巧
  • 利用IIS调试ASP.NET网站程序的完整步骤_实用技巧
  • Asp.Net Core轻松学习系列之配置文件_实用技巧
  • ASP.NET 页生命周期概述(小结)_实用技巧
  • 详解ASP.NET Core WebApi 返回统一格式参数_实用技巧
  • 2018年网络流行语有哪些?2018年十大网络流行语盘点
  • 华为首席财务官孟晚舟被暂扣 深圳市政府要求加方立即放人!
  • 独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    kevin

    永远在学习的路上!

    相关教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 热门教程