Android入门学习——之CSS

来源：互联网发布：淘宝达人直播怎么赚钱编辑：程序博客网时间：2024/06/05 04:07

Android入门学习–之CSS

CSS的概述

css的作用：负责页面的美观，英文全称：cascading style sheet—-层叠样式表.
html的作用：负责页面的结构

CSS的引入方式

行内样式：在标签内使用style属性，引入css内容只能在当前标签中起作用注意：只能在当前标签中起作用。
内部样式:在当前html页面中<head>内使用<style>标签引入css内补控制多个标签,注意：缺点是使得html代码和css代码混杂
外部样式:独立开发一个css文件，引入css内容。在html页面使用<link/>标签导入外部的css文件控制多个标签注意：由于html代码和css代码分离，易于维护

重要的优先级问题：（优先）行内样式 > 内部样式和外部样式（按顺序生效，就是说在后面的生效）

代码：

<html><head>    <title>这是标题</title>    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>    <!-- 内部样式 -->    <style type="text/css">        p{            color:blue;        }    </style>    <!-- 导入外部css文件 -->    <link rel="stylesheet" href="01.css"></head><body><p style="color:green;">行内控制了的效果</p><p >效果（按顺序生效，就是说在后面的生效）</p></body></html>

以下是01.css的代码：

p{    font-size:20px;color:red;}

CSS的选择器

标签选择器特点：选择同名的标签,如：

p{    color: red;}

类选择器特点：选择同类（同一个class属性值）的标签，同一个class都会生效，如：
注意：关键在于“.类名{ …. }”

<style type="text/css">    .c1{        color: blue;    }</style></head><body>    <div class="c1">类选择器</div>    <p class="c1">类选择器</p></body>

3. id选择器：只会选择一个特定id值的标签，因为id是唯一，不如其中一个p标签用了id=”name”,另一个p标签就不能使用id=”name”,其他标签也不能使用。如：
注意：“#id名{ …… }”

<style type="text/css">        div{            color: red;        }        .c1{            color: blue;        }        #d1{            color: green;        }            </style></head><body>    <div>标签选择器</div>    <div class="c1">类选择器</div>    <div class="c1" id="d1">id选择器</div></body>

优先级问题； id选择器 > 类选择器 > 标签选择器
4. 并集选择器：用逗号“，”隔开，如：div和类c1都生效，

        div,.c1{            color:red;        }

交集选择器：用空格隔开，如：div中的span的文本生效，

div span{             color:red;        }

通用选择器：使用“*”号，

        *{         color:red;        }

伪选择器作用：用于控制标签在不同状态下的样式
注意：为类选择器是按规定的顺序的， link -> visited - > hover -> active
四种状态：
- link: 标签的原始状态
- hover: 标签的鼠标经过状态
- active: 标签被按下但没有松开的状态
- vistied: 标签被访问过的状态（被点过）
伪选择器:

    /*:link: 标签的原始状态*/        a:link{           color: red;           font-size:20px;        }        /*:vistied: 标签被访问过的状态（被点过）*/        a:visited{            color:gray;            font-size:20px;        }        /*:hover: 标签的鼠标经过状态*/        a:hover{            color: blue;            font-size:20px;        }        /*:active: 标签被按下但没有松开的状态*/        a:active{            color:green;            font-size:20px;        }               /*        1)在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。        2)在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。         标准顺序： link  ->  visited - > hover  ->  active        */

CSS的盒子模型（重点）：

0 0

Android入门学习——之CSS

Android入门学习–之CSS

CSS的概述

CSS的引入方式

代码：

CSS的选择器

伪选择器:

CSS的盒子模型（重点）：