html学习-第二集（CSS）

2021-06-05 01:02

阅读：507

标签：ica head middle 20px clear title height 选择 meta

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

id选择器

类选择器

标签选择器

层级选择器

组合选择器

属性选择器

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    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">fffffffdiv>
    span class="c1">ddddddd
    div>ututututudiv>
    span>
    div id="i1">gggggggdiv>

    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;">adafafdiv>
    div class="c2 c1" style="color:pink;">adafafdiv>
    
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;">adafafdiv>

body>
html>

CSS边框

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

vertical-align:middle;

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

font-weight: bold; 字体加粗

">fdffdffd

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>title>
head>
body>
    div style="border:1px solid red;">adfdfdfdfdiv>
    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;
    ">fdffdffddiv>
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;">asdfdiv>
    span style="background-color:red;display:block;">asdfspan>
body>
html>

注意：

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

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

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

display:none让标签消失

内边距和外边距

padding margin(0.auto)

边距，

内边距 padding

外边距 margin

结束

html学习-第二集（CSS）

标签：ica head middle 20px clear title height 选择 meta

原文地址：https://www.cnblogs.com/goldtree358/p/12335558.html

上一篇：vb.net的运算

下一篇：pyjsonrpc的使用

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：html学习-第二集（CSS）
文章链接：http://soscw.com/index.php/essay/90643.html

亲，登录后才可以留言！

html学习-第二集（CSS）

评论

热门文章

推荐文章

最新文章

置顶文章