Css基础

Css基础

1. CSS : cascading style sheets层叠样式表

2.专 门负责对网页的美化

有三种使用方式(可以单用,可以混用)

文档内嵌样式表:页面head标签中添加style标签,标签里专门写css代码(推荐)

元素内嵌样式表:在HTML标签style属性。所有HTML标签都支持, 并且优先级最高

外部样式表:通过head标签中添加link标签来引入外部css文件

元素内嵌样式表:

<h1 style="width: 300px; background-color: yellow; height: 50px;">不同</h1>

文档内嵌样式表:

<head>

     <meta charset="utf-8" />

     <title>CSS</title>

     <style type="text/css">

        h3{

          background-color: cadetblue;

        }

        h4{

          background-color: cornflowerblue;

        }

     </style>

   </head>

   <body>

     <h3>易烊</h3>

     <h4>易烊千玺</h4>

   </body>

外部样式表:

外部文件:

h1{

   background-color: aliceblue;

}

h2{

   background-color: bisque;

}
<head>

     <meta charset="utf-8" />

      <title>CSS</title>

     <style type="text/css">

        <link rel="stylesheet" type="text/css" href="./css/new_file.css"/>

     </style>

   </head>

   <body>

     <h1>史迪奇</h1>

     <h2>史迪奇标签</h2>

   </body>

网址页面用外部样式表

其余网页用文档内嵌样式表

一般不用元素内嵌样式表

标签选择器:

<h1 style="width: 300px; background-color: yellow; height: 50px;">不同</h1>

id选择器:

<head>
        <meta charset="utf-8">
        <title>组合</title>
        <style type="text/css">
        #hid{
            background-color: #F0F8FF;color: cadetblue;
        }
        </style>
    </head>
    <body>
        <h1 id="hid">虾仁过</h1>
    </body>

类选择器:

<style type="text/css">
        .a{
            background-color: aliceblue;color: #7FFFD4;
        }
        </style>
    </head>
    <body>
        <hi class="a">无脑袋</hi>
    </body>

组合选择器:

<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        ol li{
            color: #6495ED;
        }
        #ulid li{
            color: crimson;
        }
        </style>
    </head>
    <body>
        <ol>
            <li>无</li>
            <li>名</li>
            <li>先</li>
            <li>辈</li>
        </ol>
        <ul id="ulid">
            <li>无</li>
            <li>头</li>
            <li>尸</li>
            <li>体</li>
        </ul>
    </body>

伪类选择器:

<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /*打开超链接默认的样式*/
            a:link{
                    color: red;
                }
                /* 鼠标悬停时样式 */
                a:hover{
                    color: #008000;
                }
                /* 鼠标点击后的样式 */
                a:visited{
                    color: gray;
                    }
                /* 鼠标点击时不释放的样式 */
                a:active{
                    color: aquamarine;
                }
        </style>
    </head>
    <body>
        <a href="http://www.woniuxy.com/" target="_blank">蜗牛</a>
    </body>

a:link    打开页面时超链接默认的样式

a:hover 当鼠标悬停到超链接上时设置的样式

a:visited 当超链接被点击后设置的样式

a:active 当鼠标点击超链接不释放时设置的样式

其中:hover 不仅仅可以作用于超链接，:hover 支持大多数HTML标签

文本类CSS 属性

color：red;               设置文本颜色

text-align:center       设置文本对齐方向  替代html属性中的align

font-size: 14px;         设置文本大小，以px（像素）为单位

font-weight:bold或者数字    设置 文本粗细

font-family：'微软雅黑' ;  设置文本字体类型

font-style：italic;       设置字体的风格。比如倾斜、斜体

<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
                p{
                    /* 字体颜色 */
                    color: #5F9EA0;
                    /* 背景颜色 */
                    background-color: azure;
                    /* 字体大小 */
                    font-size: 30px;
                    /* 字体粗细 */
                    font-weight: bold;
                    /* 字体样式 */
                    font-family: 仿宋;
                    /*  字体风格*/
                    font-style: italic;
                }
        </style>
    </head>
    <body>
        <p>5月27日早六点，何猷君在微博晒出幼时的合影，悼念父亲何鸿燊。何猷君并未做任何发文，只是
        配上了一个悲伤的表情，此番静默的哀悼，引起网友颇多感叹：“从此就没有爸爸了”“再也不能有新合影了”。</p>
    </body>

容器类CSS 属性

width：300px;            设置 HTML元素的宽度

height：300px;            设置 HTML元素的高度

border：1px solid red  设置HTML元素的边框，包括大小，颜色和边框样式

background-color: #000;   设置HTML元素的背景颜色

background-image: url(“图片地址”);      设置HTML元素的 背景图像

line-height: 20px;           设置HTML元素的行高

text-decoration:none;   设置超链接的下划线的样式

margin： 0 auto;  设置HTML元素和其他周围HTML元素之间的距离

<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
                    #tid{
                        margin: 0 auto;
                        width: 500px;
                        height: 200px;
                        background-color: #F0F8FF;
                        border: 2px solid #000800;
                        /* background-image: url(img/1.jpg); */
                        
                    }
                    
                    .a{
                        text-decoration: none;
                    }
                </style>
            </head>
            <body>
                <a class="a" href="http://www.baidu.com">百度一下</a>
                 <table id="tid" border="1px">
                            <tr>
                                <td>史迪奇</td>
                                <td>外星人</td>
                                <td>1000</td>
                                <td>外星球</td>
                            </tr>
                            <tr>
                                <td>皮卡丘</td>
                                <td>神奇宝贝</td>
                                <td>1000</td>
                                <td>神奇世界</td>
                            </tr>
                        </table>
                <div id="tid">
                    
                </div> 
    </body>

 

posted @ 2020-05-27 21:28  喬笙  阅读(98)  评论(0)    收藏  举报