css学习
来源:互联网 发布:大话西游2大圣附身数据 编辑:程序博客网 时间:2024/05/29 17:34
1、什么是CSS?
Css是Cascading Style Sheets 的简写,它除了可以轻松设置网页元素的显示位置和格式化,甚至还能产生滤镜、图像淡化、网页淡入淡出的渐变效果。
2、Css的注释:
/*……*/:注意注释不能嵌套使用
3、Css的语法格式:
样式选择器 {
属性1:值1;
属性2:值2;
……
}
4、Css的四种设置方式:
(1)内联样式表
在HTML元素标签中使用style属性内联。
<p style="position:absolute; bgcolor=red">aaaaa</p>
(2)嵌入样式表
通过HTML<style></style>标签将CSS嵌入到HTML中使用
<style>
p {
color:red;
font-size:4cm;
}
</p>
(3)外部样式表(项目中就用这个)
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
rel:链接的是什么,链接的是样式表
type:什么类型的
href:在哪呢
(4)输入样式表
可以将一个样式文件输入到另外一个样式文件中,或将一个样式文件输入到<style>标签中。
例:在test.css中导入one.css,two.css中。
p {background-color:green;}
@import url(one.css);
@import url(two.css);
他们的优先级别:
内联的高于其它的,其它的和加载的顺序有关。
5、样式选择器的分类:
(1)HTML选择器
p {
}
(2)类选择器
同一个选择器能有不同的类,因而允许同一个元素有不同的样式。
定义的方法:
[tag].类名 类名是自定义的,如果不加标签名tag,则代表所有的HTML元素都可以使用
<tag class="类名1 类名2" > 同一个元素可以使用多个类,类名之间使用空格分开
.nav {
}
(3)ID选择器
ID属性就用来对单一的元素定义单独样式
#left {
}
(4)关联选择器
a b h1 #two {
}
(5)组合选择器
主要是为了减少样式表的重复声明,组合的允许的。只要使用英文逗号(,)隔开每个选择符就可以了
a, b, h1, #one {
}
(6)伪元素选择器
是指对同一个HTML元素在不同的状态下的一种定义方式
目前只有a和p 两个HTML元素可以使用
a:hover, a:link {
}
使用方法:
标签:伪元素 标签[.类名]:伪元素
a:link :没有任何操作前的状态
a:hover:光标一到那个到超链接上的状态
a:active:选择超链接是的状态
a:visited:访问过的超链接的状态
p:first-letter:一个段落中的首字母的状态
p:first-line:一个段落中首行的状态
6、样式规则的继承:
所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。
7、样式规则的优先级:
关联选择器 > ID选择器 > Class选择器 > HTML标签选择器
- 【CSS学习】CSS语法
- 【CSS学习】CSS 创建
- 【CSS学习】CSS 背景
- 【CSS学习】CSS 表格
- 【CSS学习】CSS 边框
- css学习--css基础
- 学习CSS
- CSS学习
- CSS学习
- css学习
- CSS 学习
- CSS学习
- css 学习
- CSS 学习
- CSS学习
- css学习
- CSS 学习
- CSS 学习
- Android 打包自己的自定义组件成JAR包
- 编码风格
- 编程珠玑 12 取样问题
- Linux Framebuffer浅谈
- 敏捷个人2013.06月份户外活动报道:奥森健步读书分享会
- css学习
- 中文全文检索之coreseek(一)
- 字符串模式匹配算法——BM、Horspool、Sunday、KMP、KR、AC算法一网打尽
- tech 浅谈 Yield
- Linux内核分析 - 网络[三]:从netif_receive_skb()说起
- 1.A simple airline ticket reservation program
- 黑马程序员_XML
- 常见C++内存池技术
- iOS app之间共享数据的几种方法