CSS

CSS总结

第一章:语法总结

基本语法:

标签选择器{属性1:属性值1;属性2:属性值2;........}

三种基本形式

一、 位于html文件中的标签内部:
<p style="clolor:red;font-size:12px;">这是文本</p>
二、 位于html文件中,head标签对内,使用style标签对包围
<html>
   <head>
     <style>p{color:red;font-size:12px;}</style>
   </head>
   
    <body>
    <p>这里是文本</p>
    </body> 
</html>
三、 创建后缀名为.css的文件,将样式要求放置于其中,在html中使用link标签链接过去html文件
<html>
 <head>
     <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
    <p>这里是文本</p>
 </body>
</html>

CSS样式的特性:

CSS样式表又称为层叠样式样式表,其拥有两个特性: 第一,样式的继承特性。 即:html标签会继承包围它的父标签的样式。例如:在这个html文件中,p标签会继承body标签的样式.

<html>
 <head>
     <style>body{color:red;}</style>
 </head>
 <body>
    <p>这里是文本</p>
 </body>
</html>

这里p标签内的文字会显示红色,这个样式是继承自body标签。

第二,同一个标签同时被多个选择器选择时,如果他们的样式不冲突,他们的样式会层叠起来. 例如:在这个html文本中,p标签内的文字会将继承自body标签的样式,文字颜色和p标签的文字字号层叠起来显示为字号为12px的红色字体。

<html>
     <head>
         <style>body{color:red;} p{font-size:12px;}</style>
     </head>
     <body>
        <p >这里是文本</p>
    </body>
</html>

但是假如同一个标签同时被两个选择器选择到时,并且样式出现冲突,元素会优先使用最近的选择器的样式。 例如:这里呈现出最近的p标签的元素:即只呈现p标签定义的蓝色,而不显示body标签的红色。

<html>
    <head>
    </head>
    <body style="color:red;">
        <p style="color:blue;">这里是文本</p>
    </body>
</html>

若多个选择器选择同一个样式,且样式冲突时,样式表会根据各个选择器的计分规则,进行计分,显示分数多的。

计分规则如下:

  1. 标签选择器:1分;
  2. 类选择器: 10分;
  3. ID选择器:100分;
  4. 行内选择器:1000分;

派生选择器,根据其组合的基础选择器综合计算后根据总分来进行;


CSS选择器例子

<html>
    <head>
        <title>第一个网页</title>
        <style type="text/css">
            /*标签选择器*/
            a{
                text-decoration:none;
                color:black;
            }
            /*ID选择器*/
            #qq{
                font-weight:bolder;
            }
            /*类选择器*/
            /*标签+类选择器*/
            a.fontItalic{
                font-style:italic;
            }

            /*后代选择器 ul标签下面的li标签*/
            ul li{
                list-style-type:none;
            }

            /*伪类选择器  当光标悬停在超链接上的时候适用的样式*/
            a:hover{
                color:red;
                text-decoration:underline;
            }

            img:hover{
                border:1px solid red;
                width:200px;
                height:200px;
            }

            /*获取焦点的伪类选择器*/
            input[type="text"]:focus{
                color:green;
                background-color:silver;
            }

            /*组合选择器  多个选择器合在一起使用  所有的p标签和所有的类名是fontItalic的标签*/
            p,button.fontItalic,ul li{
                font-family:"仿宋";
            }

        </style>
    </head>
    <body>
        <!--
        文档编写的规范:
        1、标签名不能写错了
        2、要注意缩进
        3、所有的符号都是英文状态下的符号
        -->

        <p>aaaaa</p>
        <p>aaaa</p>
        <p>aaaaa</p>

        <!--超链接标签-->
        <a href="http://www.qq.com" target="_blank" id="qq">腾讯</a>
        <a href="http://www.baidu.com" target="_blank" id="baidu" class="fontItalic">百度</a>
        <a href="http://www.ifeng.com" target="_blank" id="ifeng" class="fontItalic">凤凰</a>
        <!--显示图像资源的标签-->
        <img src="Hydrangeas.jpg" width="100px" height="100px">

        <!--把图片作为超链接-->
        <a href="http://www.qq.com" target="_blank"><img src="Hydrangeas.jpg" width="100px" height="100px"></a>

        <!--按钮-->
        <button id="login" class="fontItalic">登录</button>

        <!--换行-->
        <br>
        <br>

        <!--单选按钮  name值相同  checked表示默认选中-->
        <input type="radio" name="sex" checked>
        <input type="radio" name="sex">

        <!--换行-->
        <br>
        <br>

        <!--复选框-->
        钓鱼<input type="checkbox">
        游泳<input type="checkbox" checked>
        爬山<input type="checkbox">

        <!--换行-->
        <br>
        <br>

        <!--下拉选择列表-->
        <select>
            <option>成都</option>
            <option>重庆</option>
            <option>贵阳</option>
        </select>

        <!--换行-->
        <br>
        <br>

        <!--文本输入框-->
        <input type="text">

        <!--密码输入框-->
        <input type="password">

        <!--换行-->
        <br>
        <br>

        <!--输入域  可以多行输入-->
        <textarea rows="5" cols="20"></textarea>

        <!--横线-->
        <hr>

        <!--无序列表-->
        <ul>
            <li>红楼梦</li>
            <li>三国演义</li>
            <li>水浒传</li>
            <li>西游记</li>
        </ul>

        <!--有序列表-->
        <ol>
            <li>红楼梦</li>
            <li>三国演义</li>
            <li>水浒传</li>
            <li>西游记</li>
        </ol>

        <!--横线-->
        <hr>

        <!--表格  table表示这是一个表格  tr定义表格的行  td定义表格的列-->
        <table width="300px" height="200px" border="1">
            <tr>
                <td>用户名</td>
                <td><input type="text"></td>
                <td>3</td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password"></td>
                <td rowspan="2">6</td>
            </tr>
            <tr>
                <td colspan="2">7</td>

            </tr>
        </table>

    </body>
</html>
(0)

本文由 SilenceLee的学习笔记 作者:silencelee 发表,转载请注明来源!

热评文章

发表评论

解决 : *
44 ⁄ 22 =