CSS简要内容
1. 简介
用于布局与美化网页(颜色,字体)
CSS语言是一种标记语言,不需编译,可直接由浏览器执行
大小写不敏感
CSS定义由选择符、属性、属性取值组成
格式:selector{property:value}
注释:/*CSS注释*/
长度单位:
相对长度单位:px像素,em相对于当前对象内文本的字体尺寸,%百分比
绝对长度单位:pt点,cm厘米,mm毫米
颜色值:#rrggbb,#rgb,rgb(x,x,x),rgb(x,x,x),x为0~100的整数值
css指定URL地址方式:
body{background-image:url(……)}
2. 在html文档中放置css的几种方式
2.1 内联引用(也叫行内引用)
就是把css样式直接作用在html标签中
<p style=”font-size:10px;color:#ffffff”>
使用css内联引用表现段落
</p>
2.2 内部引用(也叫内嵌式)
使用style标签直接把css文件中的内容直接加载到html文档内部的<head>标签中
特点是适合用于一个html文档具有独一无二的样式时
2.3 外部引用
使用了外接的css文件,一般的浏览器都有缓存功能,所以用户不用每次都下载此css文件
相对于内部引用和内联引用来说是高效的,是节省带宽的。
实现外部引用有两种方式:
使用link标签引用css
使用@import导入css
多重样式表的叠加:如果在同一个选择器上使用几个不同的样式表时,这个属性值将会叠加几个样式表,遇到冲突的地方会以最后定义的为准。
3. css选择器(选择符)
3.1 html(标签)选择符
即html标签,用来改变一个指定标签的样式,任何html元素都可以是一个css的选择符。
语法:html标签名{属性:值}
P{text-indent:3em} /*当中的选择符是p*/
3.2 类选择符
匹配文档中元素E的class属性的属性值为classname的元素
语法:标记名.类名{属性:值}或.类名{属性:值}
类选择符的定义需要有.符号
.note{font-size:small} /*为note的类可以被用于任何元素*/
3.3 ID选择符
匹配文档中元素E的id属性的属性值为idname的元素
语法:ID名称{属性:值}
定义需要有#符号
#main{text-indent:3em;} /*ID名称main前加上一个#号*/
id属性的特殊之处在于,一个文档中只能有一个元素使用一个ID选择符(与class属性正好相反),id属性可用来单一地标识一个元素。
3.4 关联选择符
也叫包含选择符,可单独对某种元素包含关系定义的样式表,元素1包含元素2,这种方式只对在元素1的元素2定义,对单独的元素1或元素2无定义
语法:选择符1 选择符2 ……{属性:值}
如:table a {font-size:12px}
3.5 组合选择符
也叫选择符组,可把相同属性和值的选择符组合起来书写,用逗号将选择符分开,可减少样式重复定义。
语法:选择符1,选择符2,……{属性:值}
如:h1,h2,h3,h4,h5,h6{color:green}
3.6 伪元素选择符
指对同一个html元素不同状态的一种定义方式
语法:标签:伪元素{属性:值}
例:a:link{……} /*未访问的链接*/
a:visited{……} /*已访问的链接*/
a:hovor{……} /*鼠标在链接上*/
a:active{……} /*激活链接*/
提示:a:hovor必须置于a:link和a:visited之后才有效;a:active必须置于a:hovor之后才有效
4. 常见属性和值
4.1 字体和颜色
font---简写,把所有针对字体的属性设置在声明中
font-family字体系列 font----size字体尺寸 font----style字体风格 ……
4.2 文本属性
color---文本颜色
text-align 对齐元素中的文本
text-indent 缩进元素中文本的首行
text-height 设置行高
text-decoration 向文本添加修饰,如underline下划线
4.3 背景属性
background 简写,将背景属性设置在一个声明中
background-color、background-image、background-repeat(设置是否重复,repeat、repeat-x、repeat-y、no-repeat)……
可简写为一行:
background:<背景颜色>||<背景图片>||<背景重复>||<背景附件>||<背景位置>
4.4 边框属性
每个内容或元素外边都可以有一个边框,分top、bottom、left、right
有color(颜色),style(样式,一定要取值),width(宽度)
style取值:none无样式 hidden除了同表格边框发生冲突的时候,其他同none
dotted点划线 dashed虚线 solid实线 double双线 groove槽状 ridge脊状与groove相反
inset凹陷 outset凸出,与inset相反
4.5 列表属性
list-style-type 设定引导列表项的符号类型,可设置多种符号类型,值为disc、circle、square等
list-style-image 使用图像作为定制列表符号
list-style-position 决定列表项目缩进的程度
三.DIV+CSS网页标准化布局
1. DIV+CSS对页面布局的优势
表现与内容相分离;代码简洁,提高页面浏览速度;易于维护和改版;提高搜索引擎对网页的索引效率
2. “无意义”的HTML元素div和span
div和span标签没有任何内容上的意义,但与CSS结合起来后应用十分广泛。它们被用来组合成一大块HTML代码并赋予一定的信息,大部分用类属性class和标识属性id与元素联系起来。span是内联的,用在一小块内联HTML中,而div是块级的(等同于其前后有断行)。
3. W3C盒子模型
4. 与页面布局有关的CSS属性
position 用于定义一个元素是否absolute(绝对),relative(相对)
top、left 层距离顶点纵、横坐标的距离
text-align、line-height
z-index 决定层的先后顺序和覆盖关系
display 显示属性,设定block值以块状显示;设定inline值则内联显示;设定none值关闭指定元素及其子元素的显示
visibility 针对嵌套层的设置,inherit父层可见子层可见,visible父层是否可见子层都可见,hidden父层是否可见子层都隐藏
overflow 设置层内的内容超过曾所能容纳的范围处理方式。常用hidden,隐藏超出层大小的内容
float 设置区块漂浮属性,分left、right
clear 清除属性指定一个元素是否允许有元素漂浮在它旁边,值有left、right、none(缺省值)、both
5. 盒子区块框的定位
相对定位a:hovor{
position:relative;
top:1px; /*设置元素使用相对定位*/
left:1px;
}
绝对定位(不方便更改,少用)
CSS简要内容的更多相关文章
- Python开发【第十篇】:CSS --无内容点击-不进去(一)
Python开发[第十篇]:CSS --无内容点击-不进去(一)
- 使用CSS为内容设定特定的鼠标样式(cursor)介绍
相信大家都知道我们的鼠标在网页中不同的元素中有不同的显示(例如 a 元素就显示为“箭头指针”),但是其实我们还可以自定义这些有趣的东西哦!今天“畅想资源”就来教大家如何使用CSS为内容设定特定的鼠标样 ...
- css基础内容
css基础内容 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离 ...
- div+css隐藏内容样式方法
div css隐藏内容样式方法 div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...
- CSS进阶内容—盒子和阴影详解
CSS进阶内容 在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS三大特性 首先我们先 ...
- CSS进阶内容—浮动和定位详解
CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...
- CSS进阶内容——布局技巧和细节修饰
CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然 ...
- JavaScript权威设计--CSS(简要学习笔记十六)
1.Document的一些特殊属性 document.lastModified document.URL document.title document.referrer document.domai ...
- JavaScript权威设计--JavaScript脚本化文档Document与CSS(简要学习笔记十五)
1.Document与Element和TEXT是Node的子类. Document:树形的根部节点 Element:HTML元素的节点 TEXT:文本节点 >>HtmlElement与 ...
随机推荐
- RedHat9上安装jdk
1.先在windows下载jdk:jdk-6-dlj-linux-i586.bin 2.用ftp上传给linux下 3.chmod 777 jdk-6-dlj-linux-i586.bin 4.将jd ...
- 9 Palindrome Number(判断是否为回文数Easy)
题目意思:判断是否为回文数,不许使用额外空间 ps:一直不理解额外空间的意思,int能用吗 思路:1.比较头尾 2.翻转,越界问题需考虑 class Solution { public: bool i ...
- Subversion 1.7 Eclipse integration in Ubuntu12(转载)
原文链接:http://steveliles.github.io/subversion_1_7_eclipse_integration_in_ubuntu.html Getting Subversio ...
- php 带cookie采集某页面
<?php error_reporting(0); define("temp_dir", dirname(__FILE__)."/Public/"); d ...
- Java进阶代码
本文重在温习……不过初学以及进阶高手不可错过 1. public static void arraycopy(全小写)(object src,int srcPos,object dest,int d ...
- mongose排序查询
Kc.find({bjid:req.params.bjid}).sort({'_id':1}).exec(function(err,kcs){ if(err){ res.json({no:0,msg: ...
- java浮点类型计算
java浮点类型需要采用java.math.*这个工具包,这样的计算结果才是我们想要的.呵呵 import java.math.BigDecimal; import java.text.NumberF ...
- 【中国剩余定理】POJ 1006 & HDU 1370 Biorhythms
题目链接: http://poj.org/problem?id=1006 http://acm.hdu.edu.cn/showproblem.php?pid=1370 题目大意: (X+d)%23=a ...
- cannot be resolved to a type in same package 问题解决
在 STS 上,一个类引用在相同 package 中另一个类,但是报 cannot be resolved to a type 错误. 解决方法 : Alternatively, you can hi ...
- SRM475 - SRM479(1-250pt,500pt)
SRM 475 DIV1 300pt 题意:玩游戏.给一个棋盘,它有1×n(1行n列,每列标号分别为0,1,2..n-1)的格子,每个格子里面可以放一个棋子,并且给定一个只含三个字母WBR,长度为n的 ...