前言
前面学习了Html,现在接下去学习一下Css.
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
我觉得可以把CSS理解为Android的Style&Theme
css 样式由选择符和声明组成，而声明又由属性和值组成,如下:
选择符：又称选择器，指明网页中要应用样式规则的元素
例子如下:
1 | p{ |
意思是修改<p>标签的相关属性.
CSS中的注释:/*注释语句*/ 跟Java一样
HTML中的注释:<!--注释语句--> 跟Xml一样
CSS的写法
内联式:
直接写在标签里,感觉直观方便,但是不容易统一维护,不方便管理.1
<p style="color:red">这里文字是红色。</p>
嵌入式css样式:
在<style>标签里定义,嵌入在head里1
2
3
4
5
6
7<head>
<style type="text/css">
span{
color:red;
}
</style>
<head>
- 外部式css样式(也可称为外联式)):
1 | <link href="base.css" rel="stylesheet" type="text/css" /> |
注意：
- css样式文件名称以有意义的英文字母命名，如 main.css。
- rel=”stylesheet” type=”text/css” 是固定写法不可修改。
- 标签位置一般写在标签之内。
感觉像是include和import一样,将独立的CSS文件引入进来,可以解耦,方便维护~~
我想,用得更多的是这一种方式吧.
三种方式的优先级
内联式 > 嵌入式 > 外部式
跟在Android中Xml给某个View定义属性一样,在
选择器
标签选择器,选择器是标签名字
1
p{}
类选择器
作用于Class,语法(前面有.):1
.类选器名称{css样式代码;}
比如:1
2
3
4.stress{
color:red;
}
<span class="stress">胆小如鼠</span>
.stress就是个类选择器
- ID选择器
作用于id,语法(前面是#):1
#setGreen{color:green;}
例子同类选择器.
类选择器和ID选择器的异同
相同点：可以应用于任何元素
不同点：
- ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
- 可以使用类选择器词列表方法为一个元素同时设置多个样式。
子选择器
即大于符号(>),用于选择指定标签元素的 第一代子元素.1
.food>li{border:1px solid red;} //居然没有分号?
通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是 匹配html中所有标签元素 如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
1 | * {color:red;} |
- 伪类选择符
更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
1 | a:hover{color:red;} |
CSS属性
| 属性 | 单位 | 意义 |
|---|---|---|
| font-size | px | 字体大小 |
| color | red or #rgb | 字体颜色 |
| font-weight | bold(加粗) | 字体 |
| border | px | 边框 |
| solid | red or#rgb | 填充色 |
//to do 估计也有很多很多其他属性吧,以后知道了再补充
小结
按照Android的相关知识去理解,发现CSS也挺简单的,很容易理解嘛~
当然,入门总是简单的…
