CSS层叠样式表cascading style sheets

将网页中的样式单独分离出来,完全由CSS控制,增强样式复用性和扩展性。

格式:选择器{属性名:属性值;属性名:属性值;……}

CSS与HTML结合的4中方式:

1、每个HTML标签都有style属性

2、当页面中有多个标签具有相同样式时,可定义style标签封装样式以复用

<style type=”text/css”>css代码</style>

3、当多个页面使用相同样式时,可将样式单独封装为CSS文件导入

<style type=”text/css”>@import url(“1.css”);</style>

4、通过HTML头标签中的link标签链接一个CSS文件

<link rel=”stylesheet” href=”1.css” media属性可选,默认设备屏幕/>

技巧:为提高样式的复用性和可扩展性,将多个样式单独定义并封装为CSS文件,如p.css、div.css……在一个总的CSS文件中,使用import导入这些CSS文件,然后在HTML页面中用link标签将这个总的CSS文件导入即可。

优先级:就近原则       标签上设置的style属性可以覆盖其他样式

选择器:

1、标签选择器:每个HTML标签名即为一个选择器

2、类选择器:标签中的class属性指定   定义样式要加点  js引用时用className

3、ID选择器:标签的id属性,尽量保证唯一,便于JavaScript获取元素

4、扩展选择器:

a、关联选择器:标签中的标签  table div表示表格中的div区域

b、组合选择器:多个选择器     逗号分隔

c、为元素选择器:元素的状态 如超链接的默认状态、点击状态、悬停状态等

a:link      a:visited         a:hover           a:active   LVHA顺序

删除超链接默认下划线:text-decoration:none

p:first-letter    p:first-line             focus:IE6不支持

CSS滤镜:通过一些代码丰富了的样式

网页设计时,DIV+CSS

DIV和P标签都属于行级区域,回车效果,SPAN标签为块级区域,无回车效果

可加border、color等属性,P标签中不要嵌套DIV标签

CSS知识点摘记的更多相关文章

  1. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  2. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  3. 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  4. 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11

    系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...

  5. css知识点

    css知识点 一.盒模型知识 border: 边框 border-width:边框的宽度 border-color:边框的颜色 border-style:边框的线型 border-top:上边框 bo ...

  6. CSS知识点集锦

      CSS知识点集锦 CreateTime--2016年9月29日09:43:10Author:Marydon UpdateTime--2017年3月21日08:03:13 2.CSS样式优先级问题 ...

  7. 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作、构建表单)

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  8. 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作、代码编写规则)

    系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...

  9. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

随机推荐

  1. dede 设置为全动态浏览

    将织梦所有栏目设置为“使用动态页”,可以再建立栏目时选择“使用动态页”:也可以执行下面的SQL语句.update dede_arctype set isdefault=-1 将网站所有文档都设置为“仅 ...

  2. 下拉条的连动-ajax方式

    客户端触发: <select id="category1" onchange="changecategory()">    <option v ...

  3. Python中字符串切片操作

    一:取字符串中第几个字符 print "Hello"[0] 表示输出字符串中第一个字符print "Hello"[-1] 表示输出字符串中最后一个字符   二: ...

  4. Dict和Set类型

    花括号{}表示这是一个dict,用于类似给定一个名字,就可以直接查找分数,d={} 由于dict也是集合,len()函数可以计算任何集合的大小   使用dict本身提供的get方法,当Key不存在时, ...

  5. jchat:linux聊天程序2:MySQL

    该软件使用的数据库为MySQL,因为它免费.开源,在linux下几乎就是最好的选择. 首先要在mysql中root用户新建数据库并赋权给本用户: create database jchat; gran ...

  6. UIImage图片转NSData

    在Iphone上有两种读取图片数据的简单方法: UIImageJPEGRepresentation  取UIImage的JPEG格式的NSData UIImagePNGRepresentation.  ...

  7. gridview外边距

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区. 您需要 登录 才可以下载或查看,没有帐号?注册  x 本帖最后由 同舟 于 2013-9-30 11:44 编辑 最新项目需要个单行显示功能键 ...

  8. WPF(MultiTrigger)

    原文 http://blog.csdn.net/haifengzhilian/article/details/8822098 <Window x:Class="TestResource ...

  9. [置顶] CSDN博客第四期移动开发最佳博主评选

    CSDN博客第三期最佳移动开发博主评选圆满结束,恭喜所有上榜用户,为继续展示移动开发方向优秀博主,发掘潜力新星,为移动开发方向的博客用户提供平台,CSDN博客第四期移动开发最佳博主评选开始.同时,获奖 ...

  10. HTML5全屏API

    现在大多数浏览器都有全屏功能,允许用户来设置或操作.但HTML5的全屏API与之不同,HTML5的全屏API允许web开发工程师在程序中调用. 这样,web开发工程师就可以再网站中设计一个按钮,当该按 ...