CSS语法

 

/*
目录:
  一: 语法     
  二: code
*/

 

一: 语法

/*css
    1 html 表达结构 
    2 css 表达样式
    3 样式和内容/结构是分离的 
*/

/* 添加
    1 外部文件
    2 头部标记
        <style>
            p{background-color:gray;}
        </style>
    3 属性内嵌
        <p style="background-color:yellow;">
            我的第一个HTML页面
        </p>
*/

/* 背景样式

    1 颜色
        <!-- <body style="background-color:#85eb5a"> --> 
        <!-- <body style="background-color:green"> --> 
        <!-- <body style="background-color:rgba(0, 255, 0, 0.1)">        <!-- 颜色 + 透明度 --> 
    
    2 属性        
    <body style="background-image:url(123.jpeg); 
        background-repeat:no-repeat;    <!-- 重复 --> 
        background-position:center;        <!-- 位置 --> 
        background-attachment:fixed">    <!-- 滚动 --> 
*/


/* 文本样式: 段落
    <p style="color:red">            <!-- 字体颜色 --> 
    <p style="text-indent: 2em">    <!-- 段首缩进 --> 
    <p style="text-indent: 10%">    <!-- 段首缩进 --> 
    <p style="text-indent:-2em; padding:2em">        <!-- 悬挂缩进 --> 
    
    <p style="text-indent:2em; line-height:2">        <!-- 行间距 --> 
    
    <p style="text-indent:2em; text-align:right">    <!-- 对齐: 靠右 --> 
    <p style="text-indent:2em; text-align:center">    <!-- 对齐: 靠右 --> 
    <p style="text-indent:2em; text-align:justify">    <!-- 对齐: 两端 --> 
    
    <p style="word-spacing: 10px">        <!-- 单词间距 --> 
    <p style="letter-spacing: 10px">    <!-- 字符间距 --> 
    
    <p style="text-transform: uppercase">    <!-- 字符变形:大写 --> 
    <p style="text-transform: lowercase">    <!-- 字符变形:小写 --> 
    <p style="text-transform: capitalize">    <!-- 字符变形:首字母大写 --> 
    
    <p style="text-decoration:underline overline line-through">    <!-- 下划线 上划线 中间线--> 
    
    <p style="white-space:pre">            <!-- 回车空格: 原文--> 
    <p style="white-space:pre-wrap">    <!-- 卷绕 -->
    <p style="white-space:nowrap">        <!-- 不卷绕 -->
    <p style="white-space:pre-line">    <!-- 合并空白 保留换行 -->
    
    <p style="direction:rtl">    <!-- 文字书写方向 -->
*/



/* 文本样式: 字体
    字体、大小、加粗、倾斜、阴影、外围轮廓、
    <p style="font-family: cursive">        <!-- 手写 -->
    <p style="font-family: hei">            <!-- 黑体 -->
    <p style="font-family: Times, TimesNR, serif">        <!-- 默认字体顺序 -->
    
    <p style="font-style: italic">        <!-- 倾斜 -->
    <p style="font-style: obique">        <!-- 倾斜 -->
    
    <p style="font-variant: small-caps">        <!-- 字母小写 -->
    
    <p style="font-weight: bold">        <!-- 加粗 -->
    <p style="font-weight: 100">        <!-- 加粗 -->
    
    <p style="font-size: 2em">        <!-- 大小 -->
    <p style="font-size: 0.4em">    <!-- 大小 -->
    <p style="font-size: 10pm">        <!-- 大小 -->
*/



/* 文本样式: 效果
    阴影 边框

    <p style="text-shadow: 3px 5px 5px rgba(0, 255, 0, 0.5)">                            <!-- 往左3个点 往下5个点 范围多大 颜色-->
    <p style="text-shadow: 0px -1px 0px #000000, 0px 1px 3px #606060; color:#606060">    

    <p style="outline-color: red; outline-style:solid; outline-width: 5px">            <!-- 边框:直线; 粗细:5px -->
    <p style="outline-color: red; outline-style:dotted; outline-width: thin">        <!-- 边框:点线; 粗细:细的 -->
    <p style="outline-color: red; outline-style:dashe; outline-width: thin">        <!-- 边框:划线; 粗细:细的 -->
    <p style="outline-color: red; outline-style:double; outline-width: 3px">        <!-- 边框:双线; 粗细:3px -->
    
    <p style="outline-color: red; outline-style:groove; outline-width: 8px">        <!-- 边框:凹槽; 粗细:8px -->
    <p style="outline-color: red; outline-style:ridge; outline-width: 8px">            <!-- 边框:凸槽; 粗细:8px -->
    <p style="outline-color: red; outline-style:inset; outline-width: 8px">            <!-- 边框:凹边; 粗细:8px -->
    <p style="outline-color: red; outline-style:outset; outline-width: 8px">        <!-- 边框:凸边; 粗细:8px -->
*/


/* 列表: 样式 
    无序列表
        <ul>
            <li> 语文</li>
            <li> 数学</li>
            <li> 物理</li>
        </ul>
        
    <ul style="list-style:square">    <!-- circle:空心圆; square:方的; -->

    <ul style="list-style-image:url(123.jpeg)">    <!-- 插图 -->
    
    <ul style="list-style-position:inside">    <!-- inside:换行-原点对齐; outside:换行-文字对齐 -->
    
    <ul style="list-style:outside circle">    <!-- 组合 -->
*/


/* 表格: 样式 
    <table border="50">    <!-- 样式 -->
        <caption>表格</caption> <!-- 表名 -->
            <tr>
                <td> 语文 </td>
                <td> 数学 <td>
                <td> 英语 <td>
            </tr>    
            <tr>
                <td> 1 </td>
                <td> 2 <td>
                <td> 3 <td>
            </tr>
    </table>
    
    <table style="border:1px solid blue;     <!-- 粗细 实线 蓝色 -->
    border-collapse:collapse">    <!-- 重叠-去重 -->
        <caption>表格</caption> <!-- 表名 -->
            <tr>
                <td style="border:1px solid blue"> 语文 </td>
                <td style="border:1px solid blue"> 数学 <td>
                <td style="border:1px solid blue"> 英语 <td>
            </tr>    
            <tr>
                <td style="border:1px solid blue"> 1 </td>
                <td style="border:1px solid blue"> 2 <td>
                <td style="border:1px solid blue"> 3 <td>
            </tr>
    </table>    
    
    <td style="border:1px solid blue; width:50px; height:50px"> 语文 </td>    <!-- 外框: 宽度 高度 -->
    <td style="border:1px solid blue; width:50px; height:50px; 
    vertical-align:top; text-align:right"> 语文 </td>                        <!-- 文字: 高度 宽度 -->
    <td style="border:1px solid blue; padding:10px"> 语文 </td>                <!-- 间距 -->
    
    <table style="caption-side:bottom;    <!-- 标题位置 -->
    table-layout:fixed/automatic"        <!-- 内容展示 -->
    </table>    
*/



/* css: 框模型 
    <table 
    style = "border: 1px solid blue;     <!-- 粗细 实线 蓝色 -->
    width: 50px; 
    height: 100px;
    vertical-align: top;
    text-align: right;
    padding:10 20 30 40;        <!-- 内边距 -->
    border-collapse: collapse">    <!-- 重叠-去重 -->
        <caption>表格</caption> <!-- 表名 -->
            <tr>
                <td style="border:1px solid blue"> 语文 </td>
                <td style="border:1px solid blue"> 数学 <td>
                <td style="border:1px solid blue"> 英语 <td>
            </tr>    
            <tr>
                <td style="border:1px solid blue"> 1 </td>
                <td style="border:1px solid blue"> 2 <td>
                <td style="border:1px solid blue"> 3 <td>
            </tr>
    </table>
*/



/* css: 定位 
 普通流 浮动 绝对
    <div style="position:absolute; top:120px">
        <p style="position:relative; left: -20px; bottom: +20px">    <!-- 相对定位 -->
        第一段
        </p>

        <p style="position:absolute; left: -20px; bottom: -20px">    <!-- 绝对定位 -->
        第二段
        </p>
    </div>


    <div>
        <img src="123.jpeg" width=200 style="float:right">    <!-- 浮动 -->
        </img>
    </div>    
*/


/* 样式选择器
    元素选择器 类选择器

    <html>
        <head>
            <style>
                p, td, th, body {border:1px solid blue}    
                p {background-color:orange}    
                p em {background-color:white}    
                *.important{color:red}                    
                p.important{color:red}                    
                *#important2{color:green}    
                *[title]{color:red}
                a:visited{color:#000000}
            </style>
        </head>
        <body>
            <table border-collapse:collapse">    <!-- 重叠-去重 -->
                <caption>表格</caption> <!-- 表名 -->
                    <tr>
                        <td> 语文 </td>
                        <td> 数学 <td>
                        <td> 英语 <td>
                    </tr>    
                    <tr>
                        <td> 1 </td>
                        <td> 2 <td>
                        <td> 3 <td>
                    </tr>
            </table>    
        
            <p title = "Hello">
                asd
            </p>
            
            <p class = "important">
                123<br>
                第<em>一</em>段
            </p>
            
            <p id = "important2">
                important2
                <a href="http://www.baidu.com"> 百度</a>
            </p>
        
        </body>
    </html>
*/

 

二: code

<!DOCTYPE html>
<html>
    <head>
        <style>
            p, td, th, body {border:1px solid blue}    
            p {background-color:orange}    
            p em {background-color:white}    
            *.important{color:red}                    
            p.important{color:red}                    
            *#important2{color:green}    
            *[title]{color:red}
            a:visited{color:#000000}
        </style>
    </head>
    <body>
        <table border-collapse:collapse">    <!-- 重叠-去重 -->
            <caption>表格</caption> <!-- 表名 -->
                <tr>
                    <td> 语文 </td>
                    <td> 数学 <td>
                    <td> 英语 <td>
                </tr>    
                <tr>
                    <td> 1 </td>
                    <td> 2 <td>
                    <td> 3 <td>
                </tr>
        </table>    
    
        <p title = "Hello">
            asd
        </p>
        
        <p class = "important">
            123<br>
            第<em>一</em>段
        </p>
        
        <p id = "important2">
            important2
            <a href="http://www.baidu.com"> 百度</a>
        </p>
    
    </body>
</html>

 

 
上一篇:基础选择器之类选择器


下一篇:【无标题】CSS中几种选择器的用法