AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Android程序员搞Web之CSS（三）

2018-07-10 1067
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 1、行内样式 数字整理表格 数字整理 小数字 ...

1、行内样式

<body>
    <table align="center" >
    <caption><h4 style="color: red; font-size: 20px">数字整理表格</h4></caption>
        <tr>
            <th>
                数字整理
            </th>
        </tr>
        <tr>
            <td style="color: #669900">小数字</td>
            <td>123</td>
        </tr>
        <tr>
            <td>中数字</td>
            <td>456</td>
        </tr>
        <tr>
            <td>大数字</td>
            <td>789</td>
        </tr>
    </table>
</body>

在标签内输入 style 并在 style 引号内输入样式
css用“ : ”


img_698f60658e920cc28b929a90e3c56b1e.png
样图

2、内部样式表

在 head 标签内通过 style 标签与选择器配合修改样式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /*选择器{属性值}*/
        th{
            color: blue
        }
        td{
            font-size: 14px
        }

        tr{
            height: 40px
        }
    </style>
</head>
<body>
    <table align="center" >
    <caption><h4 >数字整理表格</h4></caption>
        <tr>
            <th>
                数字整理
            </th>
        </tr>
        <tr>
            <td >小数字</td>
            <td>123</td>
        </tr>
        <tr>
            <td>中数字</td>
            <td>456</td>
        </tr>
        <tr>
            <td>大数字</td>
            <td>789</td>
        </tr>
    </table>
</body>
</html>
img_d38084552b7f144903c591a7941ac472.png
样图

3、外部样式

1）、创建 css 文件夹用于存 css 文件
2）、css 文件内输入选择器{}进行样式修改
3）、在html文件内使用link标签进行 html 与 css 文件的关联操作

<!-- html文件内代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <table align="center" >
    <caption><h4 >数字整理表格</h4></caption>
        <tr>
            <th>
                数字整理
            </th>
        </tr>
        <tr>
            <td >小数字</td>
            <td>123</td>
        </tr>
        <tr>
            <td>中数字</td>
            <td>456</td>
        </tr>
        <tr>
            <td>大数字</td>
            <td>789</td>
        </tr>
    </table>
</body>
</html>

/*css文件内代码*/
th{
    color: #889900
}
td{
    color: #aa3344
}
img_ad81dc9132f57815fc77e1179dd95e1a.png
样图

4、类选择器

上面点声明，下面class调用
在 style 内 .suibian(随便命名) { 属性以及属性值}
在标签内 class=“suibian” class内引入即可

<!-- html文件内代码 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <style>
    .last{
        color: blue
    }
    </style>
    
</head>
<body>
    <div>我是类选择器</div>
    <div>我是类选择器</div>
    <div class="last">我是类选择器</div>
</body>
</html>
img_a2959157c3e5dd50e515321cca5c3de6.png
样图

5、练习

<!-- html文件内代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <style>
        span{
            font-size: 100px
        }
        .G{
            color: #0E8CE8
        }
        .o1{
            color: #E21918
        }
        .o2{
            color: #FFCD41
        }
        .g{
            color: #0188FB
        }
        .l{
            color: #7FB546
        }
        .e{
            color: #B83E1F

        }
    </style>
    
</head>
<body>
    <div align="center">
        <span class="G">G</span>
        <span class="o1">o</span>
        <span class="o2">o</span>
        <span class="g">g</span>
        <span class="l">l</span>
        <span class="e">e</span>
    </div>
</body>
</html>
img_273ed4d61ab64d8e21a23b912a59bd7b.png
样图

6、多类选择器

1）、可以定义多个样式，在class内同时赋值给我一个标签
2）、当不同的style内，存在相同的属性时，标签的样式为，样式最下面的定义样式。

7、id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <style>
        span{
            font-size: 100px
        }
        #G{
            color: #0E8CE8
        }
        #o1{
            color: #E21918
        }
        #o2{
            color: #FFCD41
        }
        #g{
            color: #0188FB
        }
        #l{
            color: #7FB546
        }
        #e{
            color: #B83E1F

        }
    </style>
    
</head>
<body>
    <div align="center">
        <span id="G">G</span>
        <span id="o1">o</span>
        <span id="o2">o</span>
        <span id="g">g</span>
        <span id="l">l</span>
        <span id="e">e</span>
    </div>
</body>
</html>
img_cef5f34936b5887f086b489c81d04561.png
样图
1）、相当于将style内部的 “.类名” 改成“#id名称”
2）、将标签内的 class 改为 id。

注意：class 内的值可以多次使用；id 内的值只能使用一次，全局一次。

8、通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <style>
        *{
            color: red
        }
    </style>
    
</head>
<body>
    <div>我是小狗</div>
    <p>我是小猫</p>
    <span>我爱汪汪汪</span>
    <h1>我爱喵喵</h1>
</body>
</html>
将下面所有标签全选
img_8db3a549a2bd469903c615a1625ee2ec.png
样图

9、css属性

1）、font-size：字号大小

单位：px：像素

2）、font-family ：字体

3）、font-weight: 字体加粗 参数为：bold 或者700

normal 或者 400： 去掉加粗

4）、font-style 字体风格

参数：normal 正常字体 ；italic 倾斜的

5）、字体连写

font后面设置各种参数，但是有序的。
font： font-style（风格）、font-weight（是否加粗）、font-size（字体大小）\line-height（行高）、font-family（字体）

6）、行间距

line-height ： 设置行与行之间的距离

7）、文本水平对齐方式

text-align: center（居中）、left（左对齐）、right（右对齐）

8）、设置缩进

text-indent： 单位为：em

9）、文本修饰

text-decoration ：none 默认的，可以取消删除线
underline 下划线
overline：文本上面的先
line-through：穿过文本的线

10、符合选择器

1）、后代选择器

<!-- html文件内代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <style>
        div p{
            color: #669900
        }
    </style>
    
</head>
<body>
    <div>王者荣耀</div>
    <div>王者荣耀</div>
    <div>王者荣耀</div>
    <div>王者荣耀</div>
    <div>王者荣耀</div>
    <div>王者荣耀</div>
    <div>
        <p>小米枪战</p>
    </div>
    <div>
        <p>小米枪战</p>
    </div>
    <div  >
        <p>小米枪战</p>
    </div>
    <div>王者荣耀</div>
    <div>王者荣耀</div>
</body>
</html>
img_47a63d497de26d300e7edb167e37db82.png
样图

先写外层的，中间用空格分割，再写内层的。
外层标签class，内层class名称 标签

<!-- html文件内代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <style>
        div p{
            color: #669900
        }

        .xiaomi p{
            color: #AE81FF
        }
    </style>
    
</head>
<body>
    <div>王者荣耀</div>
    <div>王者荣耀</div>
    <div>王者荣耀</div>
    <div>王者荣耀</div>
    <div>王者荣耀</div>
    <div>王者荣耀</div>
    <div>
        <p>小米枪战</p>
    </div>
    <div class="xiaomi">
        <p>小米枪战</p>
    </div  #AE81FF>
    <div>
    <p>小米枪战</p>
    </div>
    <div>王者荣耀</div>
    <div>王者荣耀</div>
</body>
</html>
img_6518d1097cfc39ab075c1511dee1e8f4.png
样图 
div p > a

表示子代选择器，直系、不包含孙子。

2）、交集选择器

<!-- html文件内代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <style>
        div.green{
            color: green;
        }
    </style>
    
</head>
<body>
    <div>小米超神</div>
    <div class="green">小米超神</div>
    <div>小米超神</div>
    <p>王者荣耀</p>
    <p>王者荣耀</p>
    <p class="green">王者荣耀</p>
</body>
</html>
img_4a310a945f166224df34029a5a75cb49.png
样图

相同的类选择器，名称前面加标签即可，选谁谁有变化。

4）、并集选择器

<!-- html文件内代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <style>
        div,p,span,a{
            color: #998877
        }
    </style>
    
</head>
<body>
    
    <div>小米超神</div>
    <p>王者荣耀</p>
    <span>小米枪战</span>
    <a href="#">麻花藤</a>
</body>
</html>
img_2494616248ff2f09295028eb7d3face1.png
样图

多个标签具有相同样式时，可以用“，”进行分割，实现多个选择器一起更改属性。

5）、伪类选择器

链接伪类选择器：

:link 表示未访问的链接
:visited 表示已经访问的链接
:hover 表示鼠标移动的链接
:active 表示选定的链接

连用时 顺序不可颠倒

11、显示模式

1）、块级元素——块级显示模式

一种元素占一行，并且可以设置宽度、高度、对齐等属性；
例子：<h1>~<h6>、<p>、<div>、<ol>、<ul>、<li>等

2）、行内元素——行显示模式

和邻近元素在一行；
宽高无效，但是水平方向的padding和margin可以设置，垂直方向无效；
默认宽度就是本身宽度；
行内元素只能容纳文本或者是其他的行内元素。

3）、行内块元素——行内块显示模式

例子：<img/>、<input/>、<td/>
既可以设置宽高又可以在同一行内放置多个元素；

4）、三种显示模式相互转换

在相应的style内设置display属性。当块级标签转换为行标签时值为inline；行级元素转换为块级元素是参数值为block；块、行级元素转换为行内块参数为inline-block;

综合练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <style>
        .nav{
            /*行内元素 行内块元素 可以当做文本*/
            text-align: center;
        }

        .nav a{
            width: 120px;
            height: 50px;
            background-image: url(images/bg.png); 
            display: inline-block;
            text-align: center;
            text-decoration: none;
            color: #ffffff;
            /*行高等于盒子的高度可以使一行文本居中*/
            line-height:50px;
        }
        .nav a：hover{
            background-image: url(images/bgc.png);
        }
        </style>
</head>
<body>
    <div class="nav">
        <a href="#">网络导航</a>
        <a href="#">网络导航</a>
        <a href="#">网络导航</a>
        <a href="#">网络导航</a>
        <a href="#">网络导航</a>
    </div>
</body>
</html>
img_240ae049d20a2ea88bccd1746a7286fb.png
样图
文章标签：
前端开发
Android开发
程序员
Web App开发
关键词：
Android程序员
程序员web
吾乃韩小呆
目录
相关文章
老板这功能得加钱
|
8月前
|
缓存 程序员 定位技术
Android Studio 插件，那些被大厂优化的程序员们
Android Studio 插件，那些被大厂优化的程序员们
老板这功能得加钱
63 0
aqi00
|
3月前
|
Web App开发 安全 程序员
FFmpeg开发笔记（五十五）寒冬里的安卓程序员可进阶修炼的几种姿势
多年的互联网寒冬在今年尤为凛冽，坚守安卓开发愈发不易。面对是否转行或学习新技术的迷茫，安卓程序员可从三个方向进阶：1）钻研谷歌新技术，如Kotlin、Flutter、Jetpack等；2）拓展新功能应用，掌握Socket、OpenGL、WebRTC等专业领域技能；3）结合其他行业，如汽车、游戏、安全等，拓宽职业道路。这三个方向各有学习难度和保饭碗指数，助你在安卓开发领域持续成长。
aqi00
90 1
FFmpeg开发笔记（五十五）寒冬里的安卓程序员可进阶修炼的几种姿势
jianz123
|
3月前
|
Web App开发 Android开发
利用firefox调试安卓手机端web
该教程详细介绍如何通过Firefox浏览器实现手机与电脑的远程调试。手机端需安装最新版Firefox，并按指定步骤设置完成；电脑端则需安装15版及以上Firefox。设置完成后，通过工具栏中的“远程调试”选项，输入手机IP地址即可连接。连接确认后，即可使用电脑端Firefox调试器调试手机上的Web信息。注意，调试前手机需提前打开目标网页。
jianz123
117 2
宁波阿成.
|
8月前
|
JSON Android开发 数据格式
android与Web服务器交互时的cookie使用-兼谈大众点评数据获得(原创)
android与Web服务器交互时的cookie使用-兼谈大众点评数据获得(原创)
宁波阿成.
98 2
老板这功能得加钱
|
8月前
|
Android开发
Android WindowFeature小探究，Android客户端Web页面通用性能优化实践
Android WindowFeature小探究，Android客户端Web页面通用性能优化实践
老板这功能得加钱
54 0
aqi00
|
5月前
|
JavaScript 前端开发 Java
FFmpeg开发笔记（四十七）寒冬下安卓程序员的几个技术转型发展方向
IT寒冬使APP开发门槛提升，安卓程序员需转型。选项包括：深化Android开发，跟进Google新技术如Kotlin、Jetpack、Flutter及Compose；研究Android底层框架，掌握AOSP；转型Java后端开发，学习Spring Boot等框架；拓展大前端技能，掌握JavaScript、Node.js、Vue.js及特定框架如微信小程序、HarmonyOS；或转向C/C++底层开发，通过音视频项目如FFmpeg积累经验。每条路径都有相应的书籍和技术栈推荐，助你顺利过渡。
aqi00
128 3
FFmpeg开发笔记（四十七）寒冬下安卓程序员的几个技术转型发展方向
旺仔大牛
|
5月前
|
Android开发 iOS开发
[ionic]解决运行Android、IOS出现Could not find the web assets directory
[ionic]解决运行Android、IOS出现Could not find the web assets directory
旺仔大牛
46 1
土木林森
|
5月前
|
iOS开发 Android开发 MacOS
从零到全能开发者：解锁Uno Platform，一键跨越多平台应用开发的神奇之旅，让你的代码飞遍Windows、iOS、Android、macOS及Web，技术小白也能秒变跨平台大神！
【8月更文挑战第31天】从零开始，踏上使用Uno Platform开发跨平台应用的旅程。只需编写一次代码，即可轻松部署到Windows、iOS、macOS、Android及Web（通过WASM）等多个平台。Uno Platform为.NET生态带来前所未有的灵活性和效率，简化跨平台开发。首先确保安装了Visual Studio或VS Code及.NET SDK，然后选择合适的项目模板创建新项目。项目结构类似传统.NET MAUI或WPF项目，包含核心NuGet包。通过简单的按钮示例，你可以快速上手并构建应用。Uno Platform让你的技术探索之旅充满无限可能。
土木林森
112 0
Qiuner
|
7月前
|
JavaScript 程序员 应用服务中间件
快速入门Web开发（上） 黑马程序员JavaWeb开发教程（2）
快速入门Web开发（上） 黑马程序员JavaWeb开发教程（2）
Qiuner
65 7
Qiuner
|
7月前
|
XML 存储 JavaScript
快速入门Web开发（上） 黑马程序员JavaWeb开发教程（1）
快速入门Web开发（上） 黑马程序员JavaWeb开发教程（1）
Qiuner
82 5

热门文章

最新文章

  • 1
    深入探索Android系统架构：从内核到应用层的全面解析
  • 2
    探索安卓系统的最新特性与发展趋势
  • 3
    Android系统版本演进：从1.0到最新，见证移动操作系统的蜕变####
  • 4
    深入探索Android系统的内存管理机制
  • 5
    安卓与iOS开发中的线程管理差异解析
  • 6
    探索安卓开发：打造你的第一款应用
  • 7
    移动应用开发之旅：探索Android和iOS平台
  • 8
    探索安卓开发：打造你的首个天气应用
  • 9
    安卓与iOS开发中的跨平台策略：一次编码，多平台部署
  • 10
    探索Android系统的最新安全特性
  • 1
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    97
  • 2
    了解常见的web漏洞-XXE漏洞，日常如何做好web安全
    106
  • 3
    Python Web开发主要常用的框架
    223
  • 4
    MVC（模型-视图-控制器）是一种在Web应用程序开发中广泛使用的软件设计模式
    78
  • 5
    Web应用程序的会话管理是一种跟踪和识别特定用户与Web服务器之间交互的技术
    269
  • 6
    在Python Web开发中，测试是一个至关重要的环节
    184
  • 7
    深入探索Spring Boot Web应用源码及实战应用
    116
  • 8
    golang学习7，glang的web的restful接口结构体传参
    63
  • 9
    golang学习6，glang的web的restful接口传参
    60
  • 10
    golang学习5，glang的web的restful接口
    56

    • 相关课程

    更多
  • Java Web开发系列课程 - Spring框架入门
  • 开源Android容器化框架Atlas开发者指南
  • 企业Web常用架构LAMP-LNMP实战
  • 高校精品课-西安交通大学-Web 编程技术
  • Java Web项目实战 - 图书商城
  • Java面试疑难点解析 - Java Web开发

    • 相关电子书

    更多
  • Web应用系统性能优化
  • 高性能Web架构之缓存体系
  • PWA:移动Web的现在与未来

    • 相关实验场景

    更多
  • 使用SLB+2ECS+NAS，部署电商web网站的高可用架构
  • 1分钟SAE部署Web在线游戏
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 云上Web及FTP
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅