css入门学习

bigarden

浏览: 38548 次
性别:
来自: 广州

最近访客更多访客>>

liven001

zhl19860301

dxfjyygy

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css学习笔记

一个CSS语句必不可少的两部分：选择器和属性
CSS的单位是所有CSS属性的基础。常用的单位主要有颜色单位和长度单位
简单选择器：html-tag-name(代码中找到的任何标记比如<a>、</a>、<div>、<ul>){},#id=tag-name{},.class-tag-name{}，可嵌套使用(用空格分开)outer-html-tag-name inner-html-tag-name { … }，或作为一个列表将一种设计元素应用到多个选择器1st-html-tag-name, 2nd-html-tag-name { … }

优先级别：类选择器的优先级>标签选择器>ID选择器，同级别的选择器后定义的优先级较高。在选择器中使用!important优先级最高。eg:P{color:#333 !important;}
ID选择器和类选择器的区别：ID选择器不能复用。在一个xhtml文档中，一个ID选择器只能把其CSS样式指定给一个标签
组合选择器：标签选择器+ ID选择器或标签选择器+ 类选择器两种

属性选择器：id,class,href...

[att=val] //属性=val

[att*=val]//属性包括val

[att^=val]//属性以val开头

[att$=val]//属性结尾字符为val

伪元素选择器：不是针对真正的元素使用的选择器，而是针对CSS中已定义好的伪元素使用的选择器，用法如下：

选择器：伪元素{属性：值}

也可以与类配合使用，用法如下：

选择器类名：伪元素{属性：值}

css中主要有四个伪元素选择器：

first-line 某个元素的第一行文件使用样式
first-letter 某个元素的文字的首字母(欧美文字)或第一个字(中文或日文等汉字)使用样式
before 某个元素之前插入一些内容
after 某个元素之后插入一些内容

root选择器将样式绑定到页面的根元素中，即文档树中最顶层的结构元素,若html页面中则<html>部分

eg: :root{background-color:yellow;} //整个网页的背景色为黄色,若没指定则以body样式为主

body{background-color:yellow;}//body元素的背景色设为绿色

not选择器排除某个结构元素下面的子结构元素使用样式

eg: boyd *:not(h1){background-color:yellow;}//排除h1元素

empty选择器当元素内容为空白时使用样式

eg: :empty{background-color:yellow;}//空白元素背景色为黄色

target选择器用在锚出现的地方

eg: :target{background-color:yellow;}//用户点击页面的超链接并且跳转到id=text1后背景色为黄色

<div id="text1">可以使用target样式</div>

================================================================================

修饰线分为：下划线、顶划线、和删除线，通用语法：

text-decoration:textline //textline文字修饰线，可使用：none(默认是无，但a标签默认有下划线)、underline(添加下划线) overline(顶划线) line-through(删除线) blink(文字闪烁，只能在FF浏览器中正常显示)

实现文字环绕图片只需要把Img标签设置为左路浮动，即 img{float:left}
列表有三种类型：无序列表(ul)、有序列表(ol)和定义列表(dl)
定义列表：

<dl>

<dd>概念的解释</dd>

</dl>

list-style-image的属性设置为none或指定的图片不可用，则list-style-type属性起作用。即若list-style-image生效，则list-style-type就不生效。

=========div+css布局===========================================================

盒模型是DIV+CSS布局的基础，要实现DIV+CSS布局必须了解盒模型的原理。页面上的每个元素都能看作是一个容器，这个容器就是一个盒子。
边距:用于设置页面元素与其他元素的距离。语法:margin:length;//length可以是单位长度，百分比，关键字auto
边距值的缩写：

设置四个值：margin:10px 20px 30px 40px 顺时针记忆：上 /右/ 下/ 左
设置三个值：margin:10px 20px 30px 上10px/ 右、左20px /下30px
设置两个值：margin:10px 20px 上下 10px/右左 20px
设置一个值： margin:10px 上下左右边距均为10px
单边值：margin-top、margin-bottom、margin-left、margin-right

补白：用于增加页面元素边框与内容之间的空间，语法：padding:length //length可以是单位长度，百分比，关键字auto，其缩写形式与边距是一样的
边框：页面元素可视范围的最外圈，包括页面元素的补白和内容。
所有的XHTML页面元素只有两种：一是块级元素，即垂直排列（换行，高度、行高及上下边距都可控制），二是行内元素，即水平排列（同行，高度、行高及上下边距都不可控制）
CSS有三种基本的布局方式：常规流、浮动和定位