android基础之css

最新推荐文章于 2024-06-06 10:03:44 发布

Eason_hoo

最新推荐文章于 2024-06-06 10:03:44 发布

阅读量628

点赞数

分类专栏： Android

本文链接：https://blog.youkuaiyun.com/u012173245/article/details/40001733

版权

Android 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了CSS的基本概念及其在网页设计中的应用。详细讲解了CSS与HTML的四种结合方式、优先级规则、代码规范及选择器等内容，帮助读者掌握网页样式的设计技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS总结

1. CSS的简介

a) 简介：CSS （Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

b) 作用：CSS将网页内容和显示样式进行分离，提高了显示功能。

2. CSS和HTML的结合（*****）（四种）

a) 在HTML 中提供了一种属性,style="CSS的代码";

例子1：<p style="color: red;">这是p的区域1</p>

b) HTML提供了标签，<style type="text/css">CSS的代码</style>，要写在<head>标签的中间;

例子2：<style type="text/css">

div{

background-color: gray;color:orange;

}

</style>

c) 引入外部文件的方式（常用的方式）; 定义一个外部的CSS文件（.css）结尾的。@import url("css文件的地址");需要写在<style>标签的内部；

例子3：<style type="text/css">

@IMPORT url("zong.css");

</style>

d) html提供的标签（常用的方式）；

例子4：<link rel="stylesheet" type="text/css" href="zong.css">

3. CSS的优先级

a) （一般情况下）从上到下，由外到内，优先级从低到高的。

b) 特殊情况：标签名选择器 < class选择器 < ID选择器 < style属性

4. CSS的代码规范

a) 选择器名称{属性名:属性值;属性名:属性值;...}

b) 如果一个属性有多个值，值与值直接用空格隔开

c) 例子 div{border:值1 值2 值3}

5. CSS的选择器（*****）

a) 选择器：编写的CSS代码作用在哪个标签上。

b) 基本选择器：

i. 标签名选择器：使用的固定方法 div{ 样式的设置 }

例子：div{

color: red;

}

ii. 类选择器: HTML提供了一种属性(class)（常用的),固定的方法：.class的名称（.haha）

例子：.haha{

font-size: 26px;

color: maroon;

}

.hehe{

background-color: fuchsia;

color: green;

}

iii. ID选择器：HTML提供属性固定的使用方法#ID

例子：#buhaha{

color: red;

}

#hahaId{

font-size: 20px;

color: red;

}

c) 选择器级别：标签名选择器 < class选择器 < ID选择器 < style属性。

d) 扩展选择器

i. 关联选择器：多个标签之间产生关系；中间用空格隔开。可以一次行为多个属性赋值。

例子：

<div class="haha" >这是div的<font>区域1</font></div>

div font{

color: red;

}

ii. 组合选择器：对多个不同的选择器设置相同的样式，中间用逗号隔开。

例子：

<span class="haha">这是span的<font>区域1</font></span>

<span id="buhaha2">这是span的区域2</span>

#buhaha2,.haha{

color: red;

}

iii. 伪元素选择器：CSS定义好的选择器；如果使用超链接的4个状态，使用的顺序： L V H A。

例子：<a href="http://www.youku.com">优酷</a> <br/>

a:LINK {

text-decoration: none;

}

a:VISITED {

font-size: 20px;

color: green;

}

a:HOVER {

font-family: 隶书;

font-size: 24px;

color: orange;

}

a:ACTIVE {

font-family: 隶书;

font-size: 30px;

color: blue;

}

6. CSS的布局（了解）

例子布局：

div{

width: 200px;

height: 100px;

}

#div1{

background-color: red;

float: left;

}

#div2{

background-color: green;

float: left;

}

#div3{

background-color: blue;

float: left;

}

</style>

</head>

<body>

Css定位：

#div3{

position: absolute;

left: 150px;

top: 150px;

}

</style>

</head>

<body>

</div>

啊，美女啊

</div>

</body>