CSS知识点摘记
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知识点摘记的更多相关文章
- 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11
系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...
- css知识点
css知识点 一.盒模型知识 border: 边框 border-width:边框的宽度 border-color:边框的颜色 border-style:边框的线型 border-top:上边框 bo ...
- CSS知识点集锦
CSS知识点集锦 CreateTime--2016年9月29日09:43:10Author:Marydon UpdateTime--2017年3月21日08:03:13 2.CSS样式优先级问题 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作、构建表单)
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作、代码编写规则)
系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
随机推荐
- dede 设置为全动态浏览
将织梦所有栏目设置为“使用动态页”,可以再建立栏目时选择“使用动态页”:也可以执行下面的SQL语句.update dede_arctype set isdefault=-1 将网站所有文档都设置为“仅 ...
- 下拉条的连动-ajax方式
客户端触发: <select id="category1" onchange="changecategory()"> <option v ...
- Python中字符串切片操作
一:取字符串中第几个字符 print "Hello"[0] 表示输出字符串中第一个字符print "Hello"[-1] 表示输出字符串中最后一个字符 二: ...
- Dict和Set类型
花括号{}表示这是一个dict,用于类似给定一个名字,就可以直接查找分数,d={} 由于dict也是集合,len()函数可以计算任何集合的大小 使用dict本身提供的get方法,当Key不存在时, ...
- jchat:linux聊天程序2:MySQL
该软件使用的数据库为MySQL,因为它免费.开源,在linux下几乎就是最好的选择. 首先要在mysql中root用户新建数据库并赋权给本用户: create database jchat; gran ...
- UIImage图片转NSData
在Iphone上有两种读取图片数据的简单方法: UIImageJPEGRepresentation 取UIImage的JPEG格式的NSData UIImagePNGRepresentation. ...
- gridview外边距
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区. 您需要 登录 才可以下载或查看,没有帐号?注册 x 本帖最后由 同舟 于 2013-9-30 11:44 编辑 最新项目需要个单行显示功能键 ...
- WPF(MultiTrigger)
原文 http://blog.csdn.net/haifengzhilian/article/details/8822098 <Window x:Class="TestResource ...
- [置顶] CSDN博客第四期移动开发最佳博主评选
CSDN博客第三期最佳移动开发博主评选圆满结束,恭喜所有上榜用户,为继续展示移动开发方向优秀博主,发掘潜力新星,为移动开发方向的博客用户提供平台,CSDN博客第四期移动开发最佳博主评选开始.同时,获奖 ...
- HTML5全屏API
现在大多数浏览器都有全屏功能,允许用户来设置或操作.但HTML5的全屏API与之不同,HTML5的全屏API允许web开发工程师在程序中调用. 这样,web开发工程师就可以再网站中设计一个按钮,当该按 ...