CSS简介
CSS(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
嗯，简单的说，就是用来美化网页的。
使用方法
有三种方法可以在站点网页上使用样式表：
- 外联式Linking（也叫外部样式）：将网页链接到外部样式表。
- 嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
- 内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
基本形式
那我们看到CSS选择器的基本形式是这样的
selector(选择器){
property1:value;(属性声明)
property2:value;
}
由一个选择器表达式和括号内的属性字典组成
兼容模式
目前的主流浏览器有很多种，那么我们为了兼容不同的浏览器，就要知道浏览器的私有属性
- Chrome,Safari
-webkit - Firebox
-moz - IE
-ms - Opera
-o
例子
.pic{
-webkit-transform:rotate(-3deg);
-otransform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
transform:rotate(-3deg);
}
语法
-
属性值语法
margin:[<length>|<percentage>|auto]{1,4}
上面这个表达式由基本元素、组合符号、数量符号三部分组成。下面我们将逐步对这三个部分进行详解。 -
基本元素组成
1.关键字 auto solid bold
2.基本类型 length percentage color
3.其他类型 'padding-width' color-stop -
组合符号
1.空格
<‘font-size’> <font-family>
必须按顺序输入相对属性值
E.g
-12px arial
2.&& 与空格相似 不过可以无序
3.|| 分割的基本属性至少出现一个
4.| 分割的属性只能出现一个
5.[] 属性分组 -
数量符号
1.默认只能出现一次
2.+ 1次或多次
3.？ 表示属性可选
4.{int,int} 第一个数字表示最少出现次数 第二个数字表示最多出现次数
5.* 可以出现 0次1次或者多次
6.# 出现一次或者多次 中间要用逗号隔开
E.g
1
padding-top:<length>|<percentage>true padding-top:1px false padding-top:1em 5% 2 border-width:[<length>|thick|medium|thin]{1,4} true border-width:2px; false border-width:2px small; 3 box-shadow:[inset?&&[<length>{2,4}&& <color>?]]#|none true box-shadow:3px 3px rgb(50%,50%,50%),red 0 0 4px inset; false box-shadow:inset 2px 4px,2px blue; -
@规则语法
@标识符 xxx:
@标识符 xxx{}
常用@规则
@media 响应式布局
@keyframes 用来描述css动画中间步骤
@font-face 引入外部字体
不常用
@import
@charset
@namespace
@page
@supports
@document
选择器
选择器主要分
- 简单选择器
- 伪元素选择器
- 组合选择器
简单选择器
- 标签选择器
基本形式
tag{color:bule;} - 类选择器
基本形式
.className{}
选择器特点
- 由字母，数字，-，_组成
- 必须以字母开头
- 区分大小写
- 可以出现多次
e.g
<p chass = "special">
<p class = “special stress”>
如果想让special类为红色
.special{color:red;}
属性可以叠加
.stress{font-weight:bold;}
这样第二个p标签同时会拥有两个属性
- id选择器
基本形式
#idName{}
选择器特点
- 由字母，数字，-，_组成
- 必须以#开头
- 区分大小写
- 只能出现一次
- 通配符选择器
基本形式
*{}
作用:会选择页面内所有元素 - 属性选择器
基本形式
[]{}
e.g
不可用状态样式
[disabled]{background:#eee}
类型是button的样式
[type=button]{color:blue;}
类包含XXX
[class~=xxxx]{color:blue;}
链接中以#开头
[href^=“#”]{color:red;};
链接中以某形式结尾比如.pdf
[herf$=pdf]{color:red;};
链接中包含某些值
[href*=“xxxx.xxx.com”]
- 伪类选择器
基本形式
tag:statement{}
e.g
所有链接字体颜色 只能选择herf有值的
a:link{}
表示访问过的
a:visited{}
悬停
a:hover{}
点击上去
a:active{}
input标签的三种状态
input:enabled/disabled/checked{}
列表行li标签
第一行或最后一行
li:first-child/last-child{}
偶数行
li:nth-child(even){}
表达式
li:nth-child(3n+1){}
倒数
li:nth-last-child(3n+1){}
标签下只有一个子元素的
tag:only-child{}
选择某标签类型的
表示选择第一个dd类型的
dd:first-of-type{}
简单选择器还可以进行组合
e.g
如果我们想选择img标签 jpg结尾的元素
img[src$=jpg]{}
id是banner hover状态的元素
#banner:hover{}
伪元素选择器
选择页面所有元素第一个字母
::first-letter{}
第一行
::first-line{}
在内容包含XX之前
::before{content:”XX”;};
之后
::after{content:”XX”}；
内容被用户选中样式
::selection{}
组合选择器
- 后代选择器
e.g
class="main" 所有是h2标签的元素
.main h2 {}
- 子选择器
class="main" 第一个标签h2的元素
.main>h2 {} - 相邻兄弟选择器
选中h2后相邻的p元素
h2+p{} - 通用兄弟选择器
h2后所有的p节点
h2~p{} - 选择器分组
h1,h2,h3{}
如有不足，请各位大大进行批评指正。谢谢
网友评论