css-常见的样式和案例

文章目录

    • 选择器
    • 多个和覆盖
    • 高度和宽度
    • 行内标签和块级标签
    • 字体设置
    • 浮动
    • 内边距
    • 外边距
    • 区域居中
    • 案例-小米商城
  • 总结

选择器

类选择器
id选择器
标签选择器
属性选择器

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .c1{
            color:red;
        }
        #c2{
            color:gold;
        }
        table{
            color:pink;
        }
        input[type="text"]{
            border:1px solid deeppink;
        }
        .v1[xx="123"]{xuanz
            color: red;
        }
        .yy >a{
            color: deeppink;
        }
    style>
head>
<body>
    <div class="c1">
        中国
    div>
    <div id="c2">
        广西
    div>
    <div class="c1">
        联通
    div>
    <table>
        <thead>
            <tr>
                <th>IDth>
                <th>IDth>
                <th>IDth>
                <th>IDth>
            tr>
        thead>
        <tbody>
            <tr>
                <td>1000td>
                <td>1000td>
                <td>1000td>
                <td>1000td>
            tr>
            <tr>
                <td>1000td>
                <td>1000td>
                <td>1000td>
                <td>1000td>
            tr>
        tbody>
    table>

    输入:<input type="text">
    输出:<input type="password" >

    <div class="v1" xx="123">xdiv>
    <div class="v1" xx="456">ydiv>
    <div class="v1" xx="789">zdiv>

    <div class="yy">
        <a>百度a>
        <div>
            <a>谷歌a>
        div>
        <ul>
            <li>美国li>
            <li>美国li>
            <li>美国li>
        ul>
    div>

body>
html>

css-常见的样式和案例_第1张图片

多个和覆盖

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .c1{
            color:red;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color:green;
        }
    style>
head>
<body>
    <div class="c1 c2">中国联通div>
body>
html>

在这里插入图片描述

高度和宽度

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .c1{
            height: 300px;
            width: 50%;
        }
    style>
head>
<body>
    <span class="c1">中国span>
    <div>联通div>
body>
html>

css-常见的样式和案例_第2张图片

行内标签和块级标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .c1{
            display: inline-block;
            height: 100px;
            width:300px;
            border:1px solid red;
        }
    style>
head>
<body>
    <div class="c1">中国div>
    <span class="c1">联通span>
    <span class="c1">河北span>
    <div style="display: inline">zhong国div>
    <span style="display: block">zhong国span>
body>
html>

css-常见的样式和案例_第3张图片

字体设置

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .c1{
            color: blue;
            font-size: 55px;
            /*font-weight: 600;*/
            font-family: 'Helvetica', sans-serif;
        }
        .c2{
            height:59px;
            width: 300px;
            border: 1px solid red;
            text-align: center;
            line-height: 59px;
        }
    style>
head>
<body>
    <div class="c1">中国联通div>
    <div class="c2">中国移动div>
body>
html>

css-常见的样式和案例_第4张图片

浮动

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .item{
            float: left;
            width: 280px;
            height: 170px;
            border:1px solid red;
        }
    style>
head>
<body>
    <div style="background-color: #000;">
        <div class="item">div>
        <div class="item">div>
        <div class="item" style="float: right">div>

        <div style="clear: both">div>
    div>
    <div>haihdsdiv>
body>
html>

css-常见的样式和案例_第5张图片

内边距

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .outer{
            border: 1px solid red;
            height: 200px;
            width: 200px;
            padding: 20px 20px 20px 20px;
        }
    style>
head>
<body>
    <div class="outer">
        <div style="color: blue">听妈妈的话div>
        <div>听妈妈的话div>
    div>
body>
html>

css-常见的样式和案例_第6张图片

外边距

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
  <div style="height: 200px;background-color: blue">div>
  <div style="height: 200px;background-color: red;margin-top:20px;">div>
body>
html>

css-常见的样式和案例_第7张图片

区域居中

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body{
            margin: 0;
        }
        .c1{
            width: 980px;
            background-color: pink;
            height: 1000px;
            margin: 0  auto;
        }
    style>
head>
<body>
    <div class="c1">div>
body>
html>

css-常见的样式和案例_第8张图片

案例-小米商城

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body{
          margin: 0;
        }
        .header{
            /*height:38px;*/
            background: #333;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }
        .header .menu{
            float: left;
            color: white;
        }
        .header .account{
            float: right;
            color: white;
        }
        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 20px;
        }
    style>
head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a>小米商城a>
                <a>小米商城a>
                <a>小米商城a>
                <a>小米商城a>
            div>
            <div class="account">
                <a>登录a>
                <a>登录a>
                <a>登录a>
                <a>登录a>
            div>
            <div style="clear: both">div>
        div>
    div>

body>
html>

在这里插入图片描述

总结

去掉页面默认边距:

body{
	margin:0;
}

内容居中:
1.文本居中

<div style="width:200px;text-align:center;">吴佩其div>

2.区域居中

.container{
	width:980px;
	margin:0 auto;
}
<div class="container">asdjhkahfdiv>

如果存在float,在兄弟节点一定加入

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

你可能感兴趣的:(html)