CSS学习02

最新推荐文章于 2023-12-14 20:51:28 发布

端木奇影

最新推荐文章于 2023-12-14 20:51:28 发布

阅读量274

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_33756795/article/details/50529809

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS列表属性
- list-style：列表样式，取值：none。去掉项目符号或编号前面的各种符号。
- ```
ul,li{
      list-style:none;
}
```

CSS边框属性：每个元素都可以加边框线
- border-left：左边框线
- - 格式：border-left：粗细线型颜色;
  - 线型：none、solid（实线）、dashed（虚线）、dotted（点状线）
  - - 举例：border-left:1em dashed red;
- border-right：右边框线
- border-top：上边框线
- border-bottom：下边框线
- border：同时给四个边加边框线。
- 注意：行内元素没有width和height的属性；块元素才有width和height的属性。
- 例如：
- - ```
  h1{
     width:600px;
     border-left:10px dashed red;
     border-top:1px solid red;
     background-color:#cccccc;
     color:#663366;
   }
```
- 表单中的各元素，都是行内元素。
- 表单中的各元素，可以指定width或height；我们更改文本框的宽度和高度（input属性）。
CSS内边距属性：边框线到内容间的距离
- 注意：平常我们所说的width和height属性，他们指内容的宽度和高度，不含内、外边距、边框线。
- padding-left：左内填充距离，左边线到内容间的距离。
- padding-right：右内填充距离，右边线到内容见的距离。
- padding-top：上内填充距离，上边线到内容间的距离。
- padding-bottom：下内填充距离，下边线到内容间的距离。
- 缩写模式：
- - padding:10px; //四个边的内填充分别为10px
  - padding:10px 20px; //上下10px，左右20px
  - padding:5px 10px 20px ; //上5px，左右10px，下20px
  - padding:5px 10px 15px 20px; //顺序一定是“上右下左”。
  - 举例：
  - ```
  h1{
      width:600px;
      background-color:#cccccc;
      color:#663366;
      padding:5px;
   }
```
CSS外边距属性：边线往外的距离
- margin-left：左边线往外的距离。
- margin-right：右边线往外的距离。
- margin-top：上边线往外的距离。
- margin-bottom：下边线往外的距离。
- 缩写：
- - margin:10px; //四个外边距分别为10px。
  - margin:10px 20px; //上下外边距10px，左右外边距20px
  - margin:5px 10px 20px; //上5px，左右10px，下20px
  - margin:5px 10px 15px 20px; //上5px，右10px，下15px，左20px
- 举例：
- ```
<span style="color:#000000;">.box{
    margin:5px;               /*外边距，边线往外的距离*/
    padding:10px;          /*内边距，边线往里的距离*/
    float:right;       /*浮动：让多个元素在一行内显示*/
   }</span>
```
- - 我们可以把网页中的每个元素，都看成是一个“盒子”。
  - “盒子”有哪些特征：内容的width或height、border、padding、margin。
Firefox浏览器汇总，firebug调试工具的安装使用
- 如果Firefox的版本高于30的话，请使用firebug2.0及以上版本。
- 如果你的Firefox的版本低于30的话，请使用firebug1.9、firebug1.7版本。
CSS背景属性
- background-color:背景颜色。
- background-image：背景图片地址。如：background-image:url(images/bg.gif/)
- background-repeat：背景平铺方式，取值：no-repeat（不平铺）、repeat-x（水平方向）、repeat-y（垂直方向）
- background-position：背景定位。格式：background-position:水平方向定位垂直方向定位；
- - 用英文单词定位：background-position:left|center|right top|center|bottom;
  - 用固定值定位：background-position:50px 50px; //背景距离容器左边50px，容器顶端50px。
  - 用百分比定位：background-position:50% 50%; //水平居中，垂直居中。
  - 用混合定位：background-position:left 10px; //背景靠左边齐，距离容器顶端10px
- 简写方式：
- - 格式：background:背景色背景图是否定位定位方式;
  - 举例：background:url(images/bg.gif) no-repeat left 10px;
  - 举例：background:#ccc url(images/01.jpg) no-repeat left 10px;
CSS浮动和清除

float：让元素浮动，取值：left、right
clear：清除浮动，取值：left、right、both(同时清除上面的左右浮动)
CSS浮动
- 浮动的元素，将向左或向右浮动，浮动到包围元素的边上或上一个浮动元素的边上为止。
- 浮动的元素，不再占空间，并且，浮动元素的层级要高于普通元素。
- 浮动的元素，一定是“块元素”。不管它原来是什么元素。（<span>这类行元素浮动后也会变成块元素）
- 如果浮动的元素，没有指定宽度的话，浮动后它将尽可能的变窄。因此，浮动元素一般要定宽和高。
- 一行的多个元素，要浮动一起浮动。
浮动的功能：可以实现将多个块元素并列排版。
举例：

 <style type="text/css">
   /*全局样式设置*/
   html,body,h2,p{margin:0;padding:0;}
   ul,li,ol{list-style:none;}
   a:link,a:visited{color:blue;text-decoration:none;}
   a:hover{color:red}
   body{font-size:18px;color:#444;font-family:黑体;background:#cccccc;}
   .box{
       border:1px solid #444;
       width:600px;
       margin:30px auto;
      }
   .box .div1{
       width:220px;
       height:100px;
       background-color:green;
       float:left;
     }
    .box .div2{
       width:220px;
       height:100px;
       background-color:blue;
       float:left;
      }
  .box .div3{
       width:100px;
       height:100px;
       background-color:red;
       float:left;
      }
   </style>
 </head>
<body>
                          <div class="box">
                                <div class="div1"></div>
                                <div class="div2"></div>
                                <div class="div3"></div>
                        </div>
                    </body>

清除元素：

如何让包围元素，包住浮动元素。
需要再浮动元素的下边，使用清除浮动操作。

.clear1{
     clear:both;
     }
<body>
       <div class="box">
         <div class="div1"></div>
         <div class="div2"></div>
         <div class="div3"></div>
        <div class="clear1"></div>
    </div>
</body>

CSS清除浮动
- CSS清除浮动的功能有两个：（1）可以使包围元素从“视觉上”包住浮动元素；（2）清除之下的其他元素将恢复默认排版。
- 有浮动，就得有清除。
- 如果包围元素指定了高度，那么可以不使用清除功能。

display属性
- 功能：规则网页元素如何显示的问题。
- 取值：none(隐藏)、block（以块显示）、inline（以行内元素显示）
- block：可以实现将行内元素转成块元素。
- inline：可以实现将块元素转成行内元素。
- 例如：
- ```
 .news{
     width:600px;
     margin:0px auto;
     border:1px solid #444;
     padding:20px;
     background-color:#cccccc;
     display:none; /*将元素隐藏起来*/
   }
```

overflow属性
- 当内容溢出时，溢出的内容该如何显示。取值：visible（可见）、hidden（隐藏）、scroll（出现滚动条）、auto（自动）
- overflow:auto;
cursor光标类型
- 网页中光标的类型，取值：help（帮助）、wait（等待）、hand、pointer（手形）等
- cursor:pointer;
CSS继承性
- CSS属性继承：外层元素的样式，会被内层元素进行继承。多个外层元素的样式，最终都会“叠加”到内层元素上。
- 什么样的CSS属性能被继承呢？
- - CSS文本属性能被继承：
  - - color、font-size、font-family、font-style、font-weight
    - text-align、text-decoration、text-indent、letter-spacing、line-height
  - 提示：<body>中的CSS属性，会被所有的子元素继承。
CSS优先级
- 单个选择器的优先级
- - 行内样式>id选择器>class选择器>标签选择器
- 多个选择器的优先级
- - 多个选择器的优先级，指向越准确，优先级越高。
  - 特殊情况下，我们需要假设一些值：
  - - 标签选择器优先级为1
    - 类选择器优先级为10
    - id选择器优先级为100
    - 行内样式优先级为1000
  - 计算以下优先级：
  - - .news h1{color:red;} 优先级：10+1=11
    - .title{ color:blue} 优先级：10