head标签里面添加style标签，可以为标签添加样式

id选择器

类选择器

标签选择器

层级选择器

组合选择器

属性选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #i1{

            background-color:#2459a2;

            height:48px;

        }

        .c1{

            background-color:#2889a2;

            height:20px;

        }

        div{

            background-color:black;

            color:white;

        }

        span div {

            background-color:red;

            color:black;

        }

        input[type='text']{width:100px;height:200px;}

    </style>

</head>

<body>

    <div id="i1">fffffff</div>

    <span class="c1">ddddddd

    <div>ututututu</div>

    </span>

    <div id="i1">ggggggg</div>

    <input type="text">

    <input type="password">

</body>

</html>

样式优先级问题

标签上的style优先，其他编写顺序，就近原则，后写的优先

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .c2{

            font-size:28px;

            color:black;

            }

        .c1{

            background-color:red;

            color:white;

            }

    </style>

</head>

<body>

    <div class="c2 c1" style="color:pink;">adafaf</div>

    <div class="c2 c1" style="color:pink;">adafaf</div>

</body>

</html>

CSS文件用法

CSS文件

common.css

c2{

    font-size:28px;

    color:black;

    }

.c1{

    background-color:red;

    color:white;

    }

然后在html文件里面引用css文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="css/common.css" />

</head>

<body>

        <div class="c2 c1" style="color:pink;">adafaf</div>

</body>

</html>

CSS边框

<div style="

height:48px; 高度

width:70%; 宽度 像素 百分比

border:1px solid red; 边框

font-size:16px; 字体大小

text-align:center; 水平方向居中

vertical-align:middle;

line-height:48px; 垂直方向根据标签高度居中

font-weight: bold; 字体加粗

">fdffdffd</div>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div style="border:1px solid red;">adfdfdfdf</div>

    <div style="height:48px;

    width:70%;

    border:1px solid red;

    font-size:16px;

    text-align:center;

    vertical-align:middle;

    line-height:48px;

    font-weight: bold;

    ">fdffdffd</div>

</body>

</html>

CSS float样式

简单例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .pg-header{

            height:38px;

            background-color:#dddddd;

            line-height:38px;

        }

    </style>

</head>

<body style="margin:0 auto;">

    <div class="pg-header">

        <div style="width:980px;margin:0 auto;">

            <div style="float:left;">收藏本站</div>

            <div style="float:right;">

                <a>登录</a>

                <a>注册</a>

            </div>

            <div style="clear:both"></div>

        </div>

    </div>

    <div style="width:300px;border:1px solid red;">

        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>

        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>

        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>

        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>

        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>

        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>

        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>

        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>

        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>

        <div style="clear:both"></div>

    </div>

</body>

</html>

CSS display样式

可以将块级标签和行内标签转换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div style="background-color:red;display:inline;">asdf</div>

    <span style="background-color:red;display:block;">asdf</span>

</body>

</html>

注意：

行内标签 无法设置宽度 高度 padding margin

块级标签 设置宽度 高度 padding margin

display样式还有一个inline-block属性

display:none让标签消失

内边距和外边距

padding margin(0.auto)

边距，

内边距 padding

外边距 margin

结束

html学习-第二集（CSS）的更多相关文章

  1. SIGAI深度学习第二集 人工神经网络1

    讲授神经网络的思想起源.神经元原理.神经网络的结构和本质.正向传播算法.链式求导及反向传播算法.神经网络怎么用于实际问题等 课程大纲: 神经网络的思想起源 神经元的原理 神经网络结构 正向传播算法 怎 ...

  2. springboot学习——第二集：整合Mybaits

    1,Mybatis动态插入(insert)数据(使用trim标签):https://blog.csdn.net/h12kjgj/article/details/55003713 2,mybatis 中 ...

  3. NanUI for Winform 使用示例【第二集】——做一个所见即所得的Markdown编辑器

    经过了这一个多星期的调整与修复,NanUI for .NET Winform的稳定版已经发布.应广大群友的要求,现已将NanUI的全部代码开源. GitHub: https://github.com/ ...

  4. HTML学习第二天

    HTML学习第二天 今天学的比较少,有些乱,先只写一个知识点 三种样式表插入方式 外部样式表: <link rel="stylesheet" type="text/ ...

  5. SpringBoot第二集：注解与配置（2020最新最易懂）

    2020最新SpringBoot第二集:基础注解/基础配置(2020最新最易懂) 一.Eclipse安装SpringBoot插件 Eclipse实现SpringBoot开发,为便于项目的快速构建,需要 ...

  6. Mysql基础学习第二天

    Mysql基础学习第二天 函数 函数:是指一段可以直接被另一段程序调用的程序或代码. 字符串函数 数值函数 日期函数 流程函数 字符串函数 MySQL内置很多字符串函数,常用的几个如下: 函数 功能 ...

  7. 我们应当怎样学习HTML和CSS

    目标读者:web前端小白.大神请绕路 学习一门新技术,应当找一本经典入门书,在两三天之内快速翻阅完毕,了解其概貌. 然后再制定一个学习路线图(这个路线图绝大多数情况下非书本目录的顺序),接着遵循学习路 ...

  8. 前端学习 第二弹: JavaScript中的一些函数与对象（1）

    前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...

  9. 二、Android学习第二天——初识Activity（转）

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 一. Android学习第二天——初识Activity 昨天程序搭建成功以 ...

随机推荐

  1. 巨杉Tech | 十分钟快速搭建 Wordpress 博客系统

    介绍 很多互联网应用程序开发人员第一个接触到的网站项目就是博客系统.而全球使用最广的Wordpress常常被用户用来快速搭建个人博客网站.默认情况下,Wordpress一般在后台使用MySQL关系型数 ...

  2. Python中读取目录里的文件并按排序列出

    1.os.listdir():用于返回指定的文件夹包含的文件或文件夹的名字的列表. 如: dir ='F:/Home_01/img'#当前目录 filenames=os.listdir(dir)#fi ...

  3. java.lang.IndexOutOfBoundsException: Remember that ordinal parameters are 1-based!

    问题描述 java.lang.IndexOutOfBoundsException: Remember that ordinal parameters are 1-based! 红色部分报错 for ( ...

  4. 13-Java-JSP知识梳理

    一.JSP了解 JSP(java server pages,服务器页面),可理解为HTML+ Java = = JSP,它可生成动态的HTML(拼标签).是以.jsp为后缀的文件, 内容是以标签为主体 ...

  5. CF432D Prefixes and Suffixes

    CF432D Prefixes and Suffixes 题意 给你一个长度为n的长字符串,"完美子串"既是它的前缀也是它的后缀,求"完美子串"的个数且统计这些 ...

  6. Java之字符串替换replace（）

    replace(char oldChar, char newChar)返回一个新的字符串,它是通过用 newChar 替换此字符串中出现的所有 oldChar 而生成的 import java.uti ...

  7. spring（五）：AOP

    AOP(Aspect Oriented Programming) 面向切面编程,是一种编程范式,提供从另一个角度来考虑程序结构从而完善面向对象编程(OOP). 在进行OOP开发时,都是基于对组件(比如 ...

  8. 用fgets()和fputs()代替gets()和puts()

    gets()和puts不安全,有些平台会报错,如pat. gets输入字符串时,不进行数组下标的检查,也就是说当你的数组长度是n时,输入超过该长度的字符串的时候,编译不会出错,但是运行的时候会出现数组 ...

  9. 题解【洛谷P2341】 [HAOI2006]受欢迎的牛

    题面 题解 \(Tarjan\)缩点后统计每个点的出度. 如果有多个点出度为\(0\),就直接输出\(0\),否则输出出度为\(0\)的强连通分量里的点数. 代码 #include <iostr ...

  10. LeetCode第144场周赛总结

    5117.IP地址无效化 首先计算出输入IP地址的长度,然后遍历每一个字符. 如果当前字符为'.',就在它的前后两侧分别加上'['和']'字符. 值得一提的是,C++的String类型提供了以上操作的 ...