CSS Cascade Style Sheets 样式表层叠/级联

最新推荐文章于 2024-04-20 16:25:04 发布

置顶 Mr_Lizl

最新推荐文章于 2024-04-20 16:25:04 发布

阅读量450

点赞数

分类专栏： jsp 文章标签： css color html

本文链接：https://blog.csdn.net/qq_34803742/article/details/75307231

版权

jsp 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS  Cascade Style Sheets   样式表  层叠/级联

作用：美化HTML

语法：
    样式属性名：值；样式属性名2：值2；



行内样式

场景：应用于网页中一个元素样式。

语法：<html标签 。。。 style="样式规则">....</html标签>   

应用:自动应用         

例子： <h1 style="font-size:20px;color:red;font-family:楷体"> 增加样式的标题</h1>   



内嵌样式
<head>
    <style type="text/css">
        选择器名称{
                样式规则
            }
    </style>
</head>         
1.html选择器
场景：同一个网页中多个相同标签，样式一致。

语法： 
    <style type="text/css">
        html标签名称{
                样式规则
            }
    </style>    
应用：自动应用
例子：<head>
    <style type="text/css">
            p{
                border-style:solid;
                border-width:2px;
                border-top-color:red;
                border-bottom-color:yellow;
                border-left-color:green;
                border-right-color:blue;    
            }
    </style>
</head> 
<p align="center">窗前明月光，疑是地上霜，举头望明月，低头思故乡</p>

2,class选择器（类选择器）
场景：同一个网页中多个不同的标签，样式一致。
语法： <style type="text/css">
            .选择器名称{
                样式规则
            }
    </style>
应用：<html标签 。。。。 class="选择器名称(不含.)" >.......</html标签>

例子：<style type="text/css">
            .myBorder{
                border:solid 2px red;
                }
    </style>
        <h1 align="center" class="myBorder">标题1</h1>

  <p  class="myBorder">&nbsp;&nbsp;&nbsp;&nbsp;窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡</p>

3,id选择器（了解）
场景：同一个网页中多个不同的标签，样式一致。
语法： <style type="text/css">
            #选择器名称{
                样式规则
            }
    </style>
应用：<html标签 。。。。 id="选择器名称(不含#)" >.......</html标签>
注意：在html中，id属性，通常用应用唯一标示网页中的一个页面元素

例子： <style type="text/css">
            #myBorder{
                border:solid 2px red;
                }
    </style>

    <h1 align="center" id="myBorder">标题1</h1>

  <p  id="myBorder">&nbsp;&nbsp;&nbsp;&nbsp;窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡窗前明月光，疑是地上霜，举头望明月，低头思故乡</p>

4，伪类选择器
场景：在特定的标签上，产生特定动作时，样式特殊。

语法：

        a:hover{ /*鼠标移上*/
             样式规则
        }   
应用：自动应用

例子  <style type="text/css">
            a{
            color:yellow;   
            text-decoration:none;
        }

        a:hover{
            color:red;
            text-decoration:underline;  
        }
    </style>
        <a href="#">超链接，移动过来变成红色同时有下划线</a>

    a:hover   鼠标移上
    a:visited  访问过的超链接
    a:active   正在点击
    a:link   未访问过的超链接   


外部样式
场景：同一站点内的多个网页，样式风格统一

语法：
    1）定义外部样式表文件
        后缀是.css
        文件中不能包含html标签，只能有css相关的语法

    2）  引入外部表文件

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

应用：同上面各种样式表
例子： 参考 one.html  two.html  style.css


常用的样式属性
1，文本字体相关
    font-size:80px   字体大小
    color:red          颜色名称
                #FF0000      RGB色值

    font-famliy:隶书    字体类型
    text-decoration:none  无下划线
                                    underline 有下划线


2，边框相关

    border:样式，粗细，颜色  /*上下左右*/
        border:solid 2px red;                               

                border-style:solid;
                border-top-style:
                border-bottom-style:
                border-left-style:
                border-right-style:

        border-width：
                border-top-width：
                border-bottom-width：
                border-left-width：
                border-right-width：

            border-color
                border-top-color
                border-bottom-color
                border-left-color
                border-right-color      

    width:300px    宽
    heigth:100px   高

3，背景相关
    background-image:url(图片路径/文件名)     背景图片
    background-repeat:no-repeat|repeat|repeat-x|repeat-y   背景重复
    background-position:center   背景对齐，位置
    background-color:red    背景颜色

4，鼠标相关
cursor:pointer|wait|move        




布局
行级标签  <span>...</span> 不影响原内容显示，常用语对行中部分内容添加特殊样式
快级标签  <div>..</div>  单独占1块内容。

    position:absolute   /*决定定位*/
    left:50px;         x坐标
    top：200px;        y坐标
    z-index:1          z坐标
    width:            宽度
    height            高度

    display:none|block|inline    显示

DIV布局

    float:left;  浮动方式，left从左往右从上下显示
盒子模型：网页中每个元素都被看成一个矩形框(盒子)，由内容，padding(填充/内边距),border（边框）和margin（空白处/外边框）组成。
                对应的相关样式属性：
                padding:3px;   内边框
                margin:4px       外边框
                border:        边框

margin是div和周边元素的距离
padding是这个div里面内容和div的距离

Mr_Lizl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Cascade Style Sheets 样式表层叠/级联

CSS Cascade Style Sheets 样式表层叠/级联作用：美化HTML语法：样式属性名：值；样式属性名2：值2；行内样式场景：应用于网页中一个元素样式。语法：<html标签。。。 style="样式规则">....</html标签> 应用:自动应用例子： <h1 style="font-size:20px;color:red;font-fam
复制链接

扫一扫