css基础学习

以下是本人学习w3c css总结的笔记

选择器

h {
    color:red;
}

派生选择器

根据上下文关系确定某个标签的样式

p strong {
    color:red;
}

我是红色的字

(标签名可以不只是两个,可以是一个或者多个，只要html中能确定它的存在的，目的少写class，id，提升代码简洁性)

后代选择器

h1 em {
    color:red;
}

任何h1元素内的任何em元素
多个h1内将被作用

子元素选择器

比后代选择器的范围更小
选择某元素的子元素

h1 > strong {
    color:red;
}
仅一个h1被作用

相邻兄弟选择器

h1 + p {
    color:red;
}

This is a heading.
This is paragraph.

选择器作用在p元素上

id选择器

#name{
    color:red;
}

我是红色的

id具有唯一性，且区分大小写

id选择器创建派生选择器

# name p {
    color:red;
}

类选择器

.name{
    color:red;
}
我是红色的

类选择器创建派生选择器

. 类名 标签名 {
    color:red;
}
 该样式会作用于类名为 类名 元素内的< 标签名 >标签

属性选择器

1.  [属性]{
       color:red;
   }
   
   [title]{
       color:red;
   }
   
   Hello world
   
   
   属性和值选择器
   
   [属性=值]{
       color:red;
   }
   
   [title=Hello world]{
       color:red;
   }
   
   相当于是模糊匹配值
   [属性~=值]{
       color:red;
   }
   
   [title~=Hello world]{
       color:red;
   }
   

2. 标签名[属性名]{
       color:red
   } 
   
   a[href] {
        color:red 
   }
   
   标签名[属性名][属性名]{
       color:red
   } 
   
   a[href][title] {
        color:red 
   }
   

伪类

p: first-child 第一个p元素
a: active 被激活的元素添加样式
a: focus 拥有键盘焦点
a: hover 鼠标悬在元素上方
a: link 未被访问的链接添加样式
a: visited 已被访问的链接添加样式

伪元素

p:first-line 文本首行样式
p:first-letter 文本首字母样式
h1:before 在元素内容前面插入
h1:after 在元素内容后面插入

样式表

外部样式表，即XXX.css文件
内部样式表
内联样式，即把样式写在标签里面
多重样式，若某些属性值在以上三种表中定义，那么会使用近的值，即有内联用内联，之后有内部用内部，之后有外部用外部

背景

说明	属性名	值
背景颜色	background-color	red rgb(255,255,255)
背景图像	background-image	url(/image/icon.png)
背景重复	background-repeat	repeat-y 垂直 repeat-x 水平 把背景图重复平铺
背景定位	background-position	top bottom left right center (30%,30%) (30px,30px)
背景关联	background-attachment	fixed 背景不可滚动

有关背景不可继承

文本

说明	属性名	值
缩进文本	text-indent	5em 百分比值
水平对齐	text-align	top bottom left right center justify 两端文本对齐
字间隔 字（单词）之间的间隔	word-spacing	30px 5em normal
字母间隔 字符或字母之间的间的间隔	letter-spacing	30px 5em normal
字符转换 文本大小写	text-transform	none uppercase lowercase capitalize
文本装饰	text-decoration	none underline 下划线 overline 上划线 line-through 贯穿线，类似删除线 blink 文本闪烁
空白符处理	white-space	normal 丢掉多余空白格,并忽略换行符 pre 不允许自动换行 nowrap 丢掉多余空白格,忽略换行符,不允许自动换行 pre-wrap pre-line 丢掉多余空白格

字体

字体系列
Serif字体
Sans-serif字体
Monospace字体
Cursicve字体
Fantasy字体

说明	属性名	值
字体系列	font-famliy	字体系列或者是具体字体
字体风格	font-style	normal italic 斜体 oblique 倾斜
字体变形	font-variant	small-caps 小型大写字母 字母大写变小写，小写变大写，整体字变小
字体加粗	font-weight	bold 粗体 900 数值表示加粗程度
字体大小	font-size	60px 1em 浏览器默认文本大小为16px 所以一般1em=16px

链接

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

a:link {text-decoration:none;background-color:#B2FF99;}
a:visited {text-decoration:none;background-color:#FFFF85;}
a:hover {text-decoration:underline;background-color:#FF704D;}
a:active {text-decoration:underline;background-color:#FF704D;}

定位

position属性值
static
relative
absolute
fixed