html学习-第二集（CSS）

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）的更多相关文章

SIGAI深度学习第二集人工神经网络1
讲授神经网络的思想起源.神经元原理.神经网络的结构和本质.正向传播算法.链式求导及反向传播算法.神经网络怎么用于实际问题等课程大纲: 神经网络的思想起源神经元的原理神经网络结构正向传播算法怎 ...
springboot学习——第二集：整合Mybaits
1,Mybatis动态插入(insert)数据(使用trim标签):https://blog.csdn.net/h12kjgj/article/details/55003713 2,mybatis 中 ...
NanUI for Winform 使用示例【第二集】——做一个所见即所得的Markdown编辑器
经过了这一个多星期的调整与修复,NanUI for .NET Winform的稳定版已经发布.应广大群友的要求,现已将NanUI的全部代码开源. GitHub: https://github.com/ ...
HTML学习第二天
HTML学习第二天今天学的比较少,有些乱,先只写一个知识点三种样式表插入方式外部样式表: <link rel="stylesheet" type="text/ ...
SpringBoot第二集：注解与配置（2020最新最易懂）
2020最新SpringBoot第二集:基础注解/基础配置(2020最新最易懂) 一.Eclipse安装SpringBoot插件 Eclipse实现SpringBoot开发,为便于项目的快速构建,需要 ...
Mysql基础学习第二天
Mysql基础学习第二天函数函数:是指一段可以直接被另一段程序调用的程序或代码. 字符串函数数值函数日期函数流程函数字符串函数 MySQL内置很多字符串函数,常用的几个如下: 函数功能 ...
我们应当怎样学习HTML和CSS
目标读者:web前端小白.大神请绕路学习一门新技术,应当找一本经典入门书,在两三天之内快速翻阅完毕,了解其概貌. 然后再制定一个学习路线图(这个路线图绝大多数情况下非书本目录的顺序),接着遵循学习路 ...
前端学习第二弹: JavaScript中的一些函数与对象（1）
前端学习第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...
二、Android学习第二天——初识Activity（转）
(转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 一. Android学习第二天——初识Activity 昨天程序搭建成功以 ...

随机推荐

浏览器缓存信息（Autocomplete ）
Autocomplete HTML Attribute Not Disabled for Password Field 漏洞详细Web系统被识别到支持自动完成功能,这样通过浏览器可以获取到敏感信息. ...
jQuery jqgrid
1.写div <div class="ibox-content"> <div class="jqGrid_wrapper"> <! ...
centost redhat 卸载rpm以及yum install 的正确姿势
先看yum install 的卸载: 第一列为我们要的包名: 那么要移除必须使用 yum list |grep collectd | awk '{print $1}' |xargs yum r ...
使用tableExport.js直接导出web页面上的table
1,需要导入两个js文件,一个tableExport.js,另一个是jquery.base64.js,前一个文件是导出数据和核心类库,后一个是为了避免导出中文时乱码的js文件,如果你导出的数据没有中文 ...
如何修改C# winform程序图标
以Visual Studio 2012 C# Winform程序为例一.程序内部显示图标的修改方法在窗体的属性窗口找到icon属性,设置成已经准备好的ico格式的文件,效果如下二.程序外部显示图 ...
【Unity|C#】基础篇(0)——C#与.NET框架
[学习资料] <C#图解教程>(第1章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu.c ...
Ninject 2.x细说---1.基本使用
Ninject 2.x细说---1.基本使用 https://blog.csdn.net/weixin_33809981/article/details/86091159 本来想使用一下Ninje ...
mini-batch是什么以及dataloader的作用
mini-batch是什么以及dataloader的作用待办我们在训练神经网络时,使用的是mini-batch(一次输入多张图片),所以我们在使用一个叫DataLoader的工具为我们将5000 ...
http断点续传的原理
——————————————先讲原理,如下:—————————————————— 举一个详细的例子: 一般场景,要访问的域名:www.jizhuomi.com/android,文件名为down.zip ...
Strategic game树形DP解法(Poj1463,Uva1292)
已经写过本题用二分图的做法,见这儿. 本题的图是一棵树,求最小点覆盖也可以用树形DP的做法. 定义状态f[0/1][u]表示以u为根的子树,u选取/不选最少需要选取多少点来覆盖. 显然 f[0][u] ...

html学习-第二集（CSS）

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

随机推荐

热门专题