CSS样式指令

最新推荐文章于 2024-04-07 07:08:36 发布

刘晓伟-liu

最新推荐文章于 2024-04-07 07:08:36 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/dopdkfsds/article/details/105147449

版权

【前端】专栏收录该内容

21 篇文章 0 订阅

订阅专栏

基础：

字号：font-size:

设置粗体：font-weight:bold;

具中效果：text-align:center;

设置间距：padding:15px; 间距大小为15px

设置背景色：background-color:#FFFFCC;

设置边框：border:1px solid #FFFF00;

设置行间距：line-height:130%;

设置图文混排效果：

//对img标签设置图文混排效果

       img{

                     float:left;

       }

设置渐变效果：filter:alpha(opacity100,finishopacity=0,style=2);

精通：

设置字体：font-family:黑体,Arial,宋体,sans-serif;

表示浏览器首先寻找浏览者计算机中的“黑体”，如果没找到，则找“Arial”字体，如果都没有，则找“宋体”，如果都没有，则使用默认字体显示。

font-famil可以同时声明任意字体，字体间用逗号分隔开。

overflow:hidden;

属性作用：

1、设置标签内容不超过便签大小，超过部分会剪切掉。

2、清楚浮动。

3、可以通过overflow:hidden;让里面的盒子设置margin-top之后，外面的盒子不被顶下来。

设置a标签样式

:link:修改从未被访问过状态下的样式

a:link{
    color:tomato;
}

:visited：修改北方问过的状态下的样式

a:visited{
    color:green;
}

:active：修改鼠标长安状态下的样式

a:active{
    color:pink;
}

:hover：修改鼠标悬停在a标签上状态下的样式

a:hover{
    color:orange;
}

文字大小：

px :代表像素，显示大小与显示器分辨率有关。

英寸：font-size:0.5in;

厘米：font-size:0.5cm;

毫米：font-size:4mm;

1point,印刷的点数：font-size:2pt;

pica,1pc=12pt：font-size:2pc

绝对大小的关键字：

font-size:x-small;

font-size:small;

font-size:medium;

font-size:large;

font-size:x-large;

font-size:xx-large;

文字颜色：通过color属性设置

设置文字颜色的方式：如蓝色

color:blue;

color:#00f;

color:#0000ff;

color:rgb(0,0,255);

color:rgb(0%,0%,100%);

文字粗细:通过font-weight属性设置

文字斜体：通过font-style属性设置

设置斜体：font-style:italic;

文字下划线、顶划线、删除线

下划线:text-decoration:underline;

顶划线:text-decoration:overline;

删除线:text-decoration:line-through;

下划线+顶划线:text-decoration:underline overline;

下划线+删除线:text-decoration:underline line-through;

顶划线+删除线:text-decoration:overline line-through;

三种同时:text-decoration:underlinie overline line-through;

英文字母：

单词首字母大写：text-transform:capitalize;

全部大写：text-transform:uppercase:

全部小写：text-transform:lowercase:

段落文字：

水平对齐方式：

左对齐：text-align:left;

右对齐：text-align:right;

居中对齐：text-align:center;

两端对齐：text-align:justify;

垂直对齐方式：

顶端对齐：vertical-align:top;

底端对齐：vertical-align:bottom;

中间对齐：vertical-align:middle;

行间距和字间距：

行间距：line-height:8pt;(绝对数值，行间距小于字体大小)

行间距：line-height:1.5em;(相对数值)

CSS注释：

/* 注释内容 */ ：可以单行也可以是多行

: 避免老式浏览器不支持CSS、将CSS代码直接显示在浏览器上面而设置的HTML注释

CSS选择器：

标记选择器：通过不同的标签，设置统一标签的样式

如：设置所有h1标签的样式:文字颜色为红色，大小25px

    <style>

       h1{

                     color:red;

                     font-size:25px

       }

       </style>

类别选择器：为所有相同类别名的标签设置样式

例：为类别名为one的标签设置字体颜色为红色，字体大小19px

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
       <!--类选择器-->
       <style type="text/css">
       .one{
                                   color:red;
                                   font-size:19px;
       }      
       </style> 
</head>
<body>
                            <p class="one">class选择器</p>
</body>
</html>

标记选择器与类别选择器结合

例：

设置h3标签下的two样式：字体红色,字体大小25px

设置class属性为two的样式为，字体绿色。

因为在h3标签中设置过，h3.two的样式，所以two的样式不会应用到h3标签的two中。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
       <!--类选择器-->
       <style type="text/css">
       .one{
                                   color:red;
                                   font-size:19px;
       }
       h3.two{
                            color:red;
                            font-size:25px;
       }     
       .two{
                            color:green;
       }
       </style>     
</head>
<body>
                            <p class="one">class选择器</p>
                            <h3 class="two" > 标记选择器.calss</h3>
                            <p class="two">class选择器</p>                       
</body>
</html>

ID选择器：

例：设置id为one的p标签,字体为红色，字体大小为19px

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
       <!--ID 选择器-->
       <style type="text/css">
       #one{
                                   color:red;
                                   font-size:19px;
       }
       </style>    
</head>
<body>
                     <p id="one">ID 选择器</p>
</body>
</html>

选择器声明

当某些选择器的风格是完全相同的，或者部分相同，可以将风格相同的CSS选择器同时声明

例：设置5个h标签和一个p标签的风格一致

设置h2.special、.special 、id为“one”的标签风格一致

因为he.special标签在第一次中设置过，所以第二次并不会影响前一个集体声明

 <!--集体声明-->
       <style type="text/css">
       h1,h2,h3,h4,h5,p{
                            color:purple;
                            font-size:20px;
       }    
       h2.special,.special,#one{
                            text-decoration:underline;       
       }
       </style>     
</head>
<body>
                     <h1>集体声明1</h1>
                     <h2 class="specal">集体声明2</h2>
                     <h3>集体声明3</h3>
                     <h4>集体声明4</h4>
                     <h5>集体声明5</h5>
                     <h1>集体声明</h1>
                     <p class="special">集体</p>
                     <p id="one">声明</p>
</body>
</html>

选择器嵌套：

例：设置在p标签中嵌套的b标签的样式，在p标签之外的b标签的样式不受影响。

也可以对类别选择器和ID选择器进行嵌套。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
       <!--集体声明-->
       <style type="text/css">
                     p b{
                                          color:maroon;
                                          text-decoration:underline;                    
                     }
       </style>   
</head>
<body>
                     <p> 嵌套使用 <b>标记</b>   方法</p>
                     对方的<b>嵌套之外的方法</b>
</body>
</html>

CSS继承

例:设置class为“li1”的样式字体为红色；设置class为“li2”的样式字体为蓝色

整体样式为继承关系

对li1中的ol标签的子标签li,设置字体加粗添加下划线

利用继承设置样式。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
       <!--集体声明-->
       <style type="text/css">
       .li1{
                            color:red;
       }
       .li1 ol li{
                            font-weight:bold;
                            text-decoration:underline;
       }
       .li2{
                            color:blue;
       }
       </style>
</head>
<body>
              <ul>
                            <li class="li1" >
                                          <ul>
                                                        <li>页面父子关系复杂1</li>
                                                        <li>页面父子关系复杂2</li>
                                                        <li>页面父子关系复杂3</li>
                                          </ul>
                                          <ol>                                                                    
                                                        <li>页面父子关系复杂1</li>
                                                        <li>页面父子关系复杂2</li>
                                                        <li>页面父子关系复杂3</li>
                                          </ol>
                            </li>
                            <li class="li2" >
                                          <ul>
                                                        <li>页面父子关系复杂1</li>
                                                        <li>页面父子关系复杂2</li>
                                                        <li>页面父子关系复杂3</li>
                                          </ul>
                                          <ol>                                                                                 
                                                        <li>页面父子关系复杂1</li>
                                                        <li>页面父子关系复杂2</li>
                                                        <li>页面父子关系复杂3</li>
                                          </ol>
                            </li>            
              </ul>
</body>
</html>

刘晓伟-liu

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
6
评论
CSS样式指令

基础：字号：font-size:设置粗体：font-weight:bold;具中效果：text-align:center;设置间距：padding:15px; 间距大小为15px设置背景色：background-color:#FFFFCC;设置边框：border:1px solid #FFFF00;设置行间距：line-height:130%;设置图文混排效...
复制链接

扫一扫