Android程序员搞Web之CSS（三）

2018-07-09 694

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用“ : ”

样图

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>

样图

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
}

样图

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>

样图

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>

样图

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>

样图

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>

将下面所有标签全选

样图

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>

样图

先写外层的，中间用空格分割，再写内层的。
外层标签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>

样图

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>

样图

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

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>

样图

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

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>

样图

微信关注我们

原文链接：https://yq.aliyun.com/articles/635771

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Android JNI Aes加密

/* * AES 加密工具类 * Created by mazaiting on 2018/7/3. */ #include <jni.h> #include <cstring> #include <android/log.h> //#include "openssl/evp.h" #include <openssl/evp.h> #include <openssl/buffer.h> #define TAG "AES_CPP" #define LOGD(FORMAT, ...) __android_log_print(ANDROID_LOG_DEBUG,TAG,FORMAT,##__VA_ARGS__); // 命名空间 //using namespace std; extern "C" { // 初始化key const unsigned char *_key = (const unsigned char *) "0123456789012345"; // 初始化iv const unsigned char *_iv = ...

2018-07-09

724

Android 64 bit系统的一些兼容性分析 0x0:前言 Android L之后android开始了支持64bit的系统，现在64位的手机越来越多，基本上现在出的新机都是64位的了，所以64位将会是一个趋势，但是对于对于开发者来说，64位android你真的了解么？64位系统是如何无缝兼容32位app的？ 0x1:32位兼容分析首先在init.zygote32_64.rc里面有这两条开机启动的服务 service zygote /system/bin/app_process32 -Xzygote /system/bin --zygote --start-system-server --socket-name=zygoteservice zygote_secondary /system/bin/app_process64 -Xzygote /system/bin --zygote --socket-name=zygote_secondary 这两个进程在系统中就是传说中的zygote进程，所有进程的孵化器，zygote对应app_proccess32，zygote64对应app_...

2018-07-09

700

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

Android程序员搞Web之CSS（三）

1、行内样式

2、内部样式表

3、外部样式

4、类选择器

5、练习

6、多类选择器

7、id选择器

1）、相当于将style内部的 “.类名” 改成“#id名称”

2）、将标签内的 class 改为 id。

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

8、通配符选择器

将下面所有标签全选

9、css属性

1）、font-size：字号大小

2）、font-family ：字体

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

4）、font-style 字体风格

5）、字体连写

6）、行间距

7）、文本水平对齐方式

8）、设置缩进

9）、文本修饰

10、符合选择器

1）、后代选择器

2）、交集选择器

4）、并集选择器

5）、伪类选择器

链接伪类选择器：

连用时 顺序不可颠倒

11、显示模式

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

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

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

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

综合练习：

Android JNI Aes加密

Android 64 bit的一些兼容性分析

相关文章

发表评论

资源下载

优质分享App

Mario

Spring

Sublime Text

欢迎您来访！

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

连用时顺序不可颠倒