Css

Android程序猿学Css(上)

CSS基础,语法,选择器

Posted by 程序亦非猿 on 2016-07-06

前言

前面学习了Html,现在接下去学习一下Css.

CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。

我觉得可以把CSS理解为Android的Style&Theme

css 样式由选择符和声明组成,而声明又由属性和值组成,如下:

Css语法

选择符:又称选择器,指明网页中要应用样式规则的元素

例子如下:

1
2
3
4
5
p{
font-size:12px;
color:red;
font-weight:bold;
}

意思是修改<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" />

注意:

  1. css样式文件名称以有意义的英文字母命名,如 main.css。
  2. rel=”stylesheet” type=”text/css” 是固定写法不可修改。
  3. 标签位置一般写在标签之内。

感觉像是includeimport一样,将独立的CSS文件引入进来,可以解耦,方便维护~~
我想,用得更多的是这一种方式吧.

三种方式的优先级

内联式 > 嵌入式 > 外部式

跟在Android中Xml给某个View定义属性一样,在里的属性总是优先于外部的Style跟Theme的,很好理解

选择器

  • 标签选择器,选择器是标签名字

    1
    p{}
  • 类选择器
    作用于Class,语法(前面有.):

    1
    .类选器名称{css样式代码;}

比如:

1
2
3
4
.stress{
color:red;
}
<span class="stress">胆小如鼠</span>

.stress就是个类选择器

  • ID选择器
    作用于id,语法(前面是#):
    1
    #setGreen{color:green;}

例子同类选择器.

类选择器和ID选择器的异同

相同点:可以应用于任何元素
不同点:

  1. ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
  2. 可以使用类选择器词列表方法为一个元素同时设置多个样式。
  • 子选择器
    即大于符号(>),用于选择指定标签元素的 第一代子元素.

    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也挺简单的,很容易理解嘛~
当然,入门总是简单的…

资料

http://www.imooc.com/learn/9