CSS樣式-html教學-PHP中文網

CSS基本樣式

內聯樣式：直接在頁面檔案中使用HTML標記的style屬性。例如：

<span style="color: #800000;"> <p style="font-family:宋体;color: red;font-size: 10pt;">程序员</p></span>

登入後複製

在頁面檔案中定義樣式：這種方式是透過

<span style="color: #800000;"><style type="text/css">
        h1 </span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 12px</span>;}<span style="color: #800000;">
        #fromid </span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 12px</span>;}<span style="color: #800000;">
        .classid</span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 12px</span>;}<span style="color: #800000;">
    </style>    </span>

登入後複製

在頁面檔案中嵌入外部樣式表：語法如下

<span style="color: #800000;"><style type="text/css">
        @import url("外部CSS样式文件名");  
        <!--
        外部文件名是以.css为扩展名的CSS文件，如果该文件和当前页面同一个目录下，则直接用文件名，不在同一个目录下，则要给出其相对路径。
        ->
</style>     </span>

登入後複製

連結外部樣式表:語法如下

<span style="color: #800000;"><link type="text/css" rel="stylesheet" type="text/css" href="css/index.css"/></span>

登入後複製

CSS註解語法：CSS註解語句是位於

<span style="color: #008000;">/*</span> <span style="color: #008000;">*/</span>

登入後複製

標記之間的語句內容

CSS選擇器

HTML標記 語法如下

<span style="color: #800000;">h1 </span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 12px</span>;} <span style="color: #008000;">/*</span><span style="color: #008000;">在HTML文档中，所有该标记保护的文本都具有定义的CSS样式</span><span style="color: #008000;">*/</span>

登入後複製

CLASS選擇符 語法如下

<span style="color: #800000;">.classid</span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 12px</span>;}<span style="color: #008000;">/*</span><span style="color: #008000;"> 在HTML文档中， 所有使用该类名标记的都具有定义的标签</span><span style="color: #008000;">*/</span>

登入後複製

ID選擇符 文法如下

<span style="color: #800000;">#fromid </span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 12px</span>;}<span style="color: #008000;">/*</span><span style="color: #008000;"> 在HTML文档中，所有指定为该ID的标记都具有定义的标签</span><span style="color: #008000;">*/</span>

登入後複製

CSS樣式優先權

直接在頁面上使用HTML標記的Style屬性設定的樣式優先權最高。
其他樣式定義依照在頁面上出現的先後順序，越後面的優先權最高。
ID選擇符的優先權高於CLASS選擇符。
沒有被定義樣式控制的內容將使用瀏覽器的預設樣式。

CSS基本屬性：主要包含背景屬性，文字屬性，字體屬性，邊界屬性，邊框屬性，邊距屬性，清單屬性，定位屬性

背景屬性：CSS中有關背景的屬性，對背景顏色的設定屬性和對背景圖片的設定屬性

<span style="color: #800000;">img</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> red transparent</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;"> 
     * 用于设置背景颜色
     * 其中transparent表示透明
     * 颜色的表示方式有多种
     * 1.使用英文名称，如red,blue等。
     * 2.用6位十六进制数（#rrggbb）表示。
     * 3.用3位十六进制数（#rgb）表示。
     * 4.用rgb(r,g,b)函数表示，其中3个参数的取值可为0~255的整数或百分比值，
     * 如rgb(0,0,0)表示黑色，rgb(100%,100%,100%)表示白色。
     </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    
    background-image</span>:<span style="color: #0000ff;"> url("背景图片的路径")|none</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">
     * 用于设置要加载的背景图片 
     </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    
    background-repeat</span>:<span style="color: #0000ff;"> no-repeat</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">
     * 用于设置背景图片的排列方式，其属性设置格式如下：
     * background-repeat:repeat|repeat-x|repeat-y|no-repeat ;
     * 其中repeat表示以并列方式排列图片，是该属性的默认值，repeat-x表示以x轴方向并列排列图片；
     * repeat-y表示以y轴方向并列排列图片，no-repeat表示不以并列方式排列图片。
     </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    
    background-attachment</span>:<span style="color: #0000ff;"> scroll</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">
     * 用于设置移动滚动条时背景图片位置是否固定，其属性设置格式如下：
     * background-attachment: scroll|fixed;
     * scroll表示移动滚动条时背景图片随之滚动，fixed表示移动滚动条时背景图片不动。
     </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    
    background-position</span>:<span style="color: #0000ff;"> x,y</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">
     * 用于设置背景图片的插入位置，其属性设置格式如下：
     * 1.百分比，用于描述图片距区域元素边框的百分比值
     * 2.数值，用具体数值描述，单位可分为任意的长度单位：em px in pt pc cm mm等。
     * 3关键字，包括left right center top bottom
     </span><span style="color: #008000;">*/</span>
}

登入後複製

文字樣式主要用於設定文字的屬性

<span style="color: #800000;">h1</span>{<span style="color: #ff0000;">
    text-indent</span>:<span style="color: #0000ff;"> 20px</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">
     * 用于设置文本的首行缩进值，默认属性值为0，其属性数值用具体数值描述，单位可为任意长度单位：em px in pt pc cm mm等。
     </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    
    text-align</span>:<span style="color: #0000ff;"> left</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">
     * 用于设置文本段落的水平对齐方式，其属性设置语法如下；
     * text-align:left|right|center|justify
     * 该属性的取值有4种：
     * left表示左对齐
     * right表示右对齐
     * center表示居中对齐
     * justify表示左右对齐
     </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    
    vertical-align</span>:<span style="color: #0000ff;"> baseline</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">
     * 用于设置文本段落的垂直对齐方式，其属性设置语法如下：
     * vertical-align: baseline|sub|super|top|text-top|middle|bottom|text-bottom;
     * baseline:属性的默认值，表示段落文本与上段落文本的基线对齐；
     * sub：表示文本以下标方式显示；
     * super:表示以上标方式显示；
     * top:表示垂直向上对齐；
     * text-top:表示文本垂直向上对齐；
     * middle：表示垂直居中对齐；
     * bottom：表示垂直向下对齐；
     * text-bottom:表示文字垂直向下对齐。
     </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    
    line-height</span>:<span style="color: #0000ff;"> normal</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">
     * 用于设置文本的行距，属性设置语法如下：
     * line-height：normal|百分比|长度值
     * normal：表示该属性的默认值；
     * 百分比：表示相对于字大小font-size的百分比
     * 长度值：用具体的数值表示，其属性值可以问任意的长度单位：em px in pt pc cm mm等。
     </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    
    letter-spacing</span>:<span style="color: #0000ff;"> normal</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">
     * 用于设置字符的间距，其属性设置语法如下：
     * letter-spacing：normal|长度值；
     * normal：表示该属性的默认值；
     * 长度值：用具体的数值表示，其属性值可以问任意的长度单位：em px in pt pc cm mm等。
     * 我们也可以把长度值设置为负数，以打打紧缩字符行距的效果
     </span><span style="color: #008000;">*/</span>
}

登入後複製

CSS字體屬性主要設定文字的屬性

<span style="color: #800000;">h2</span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">
     * 用于设置文字的字体，语法设置如下：
     * font-family：字体；
     * 可以设置多种字体，用逗号隔开，浏览器按照顺序查找系统可匹配的字体，若查找不到，浏览器会使用默认的字体。
     </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    
    font-style</span>:<span style="color: #0000ff;"> normal</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">
     * 用于设置文字的效果，其属性设置语法如下：
     * font-style:normal|italic|oblique;
     * normal:表示默认值
     * italic：表示斜体
     * oblique：表示歪斜体
     </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    
    font-size</span>:<span style="color: #0000ff;"> 10px</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">
     * 用于设置字体的大小，其属性设置语法如下：
     * font-size:长度|关键字
     * 长度：用具体的数值描述，单位可以问任意的长度单位：em px in pt pc cm mm等。
     * 关键字;包括：XX-small、X-small、small、medium、large、XX-large、X-large、larger和smaller.
     </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    
    font-weight</span>:<span style="color: #0000ff;"> normal</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">
     * 用于设置文字的粗细，其属性设置语法如下：
     * font-weight：normal|bold|bolder|lighter|100~900
     </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    
    font-variant</span>:<span style="color: #0000ff;"> normal</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">
     * 用于设置文字的变形属性，其属性设置语法如下：
     * font-variant：normal|small-caps
     </span><span style="color: #008000;">*/</span>
    
    
}

登入後複製