CSS

时间：2019-10-23 09:59:03 阅读：115 评论：0 收藏：0 [点我收藏+]

CSS

引入方式

行内式

<p style="color: red">这是行内样式</p>

内部样式

在head标签里写选择器

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
          p{
              color: red;
            }
        </style>
    </head>
    <body>
        <p>这是内部样式</p>
    </body>
</html>

外部引入

使用标签引入外部css文件

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

选择器

基本选择器

元素选择器
```
p{
  color: red;
}
```
id选择器
```
#head{
    color: red;
}
```
类选择器
```
.cl{
    color: red;
}
```

组合选择器

后代选择器（以空格分隔）

选取某元素的后代元素
```
li标签中的a标签
li a{
    color: red;
}
```
子元素选择器（以大于号分隔）

相比于后代选择器，子元素选择器只能选择作为某元素子元素的元素
```
div>p{
  background-color:yellow;
}
```
兄弟选择器（以~分隔）

选取所有指定元素之后的相邻兄弟元素
```
div~p{
  background-color:yellow;
}
```
毗邻兄弟选择器（以加号分隔）

选择紧接在另一元素后的元素，且二者有相同父元素
```
div+p{
  background-color:yellow;
}
```

属性选择器

选择具有特定属性的HTML元素样式。

p[name]{
    color: red;
}

分组和嵌套选择器

分组选择器

在样式表中有很多具有相同样式的元素，为了尽量减少代码，你可以使用分组选择器（以逗号分隔）
```
h1, h2, p{
    color:red;
}
```
嵌套选择器

多种选择器混合起来使用
```
div>li, .title{
  color: red;
}
```

伪类选择器

anchor伪类选择器

a:link{
    color: black;    /*未访问的时候*/
}
a:visited{
    color: black;    /*已访问的时候*/
}
a:hover{
    color: red;    /*鼠标悬停的时候*/
}
a:active{
    color: green;    /*已选中的时候*/
}

first-child与last-child伪类选择器

div p:first-child{
    color: red;    /*父元素下的第一个子元素*/
}
div p:last-child{
    color: blue;   /*父元素下的最后一个子元素*/
}

伪元素选择器

用来添加一些选择器的特殊效果

first-line：向文本的首行设置样式
```
p:first-line{
    color: red;
}
```

first-letter：向文本的首字设置样式

p:first-letter{
    color: red;
    font-size: 36px;
}

before：在元素前插入内容

p:before{
    content: "这是插入的内容！"
}

after：在元素后面插入内容

p:after{
    content: "这是插入的内容！"
}

选择器的优先级

每个选择器在权重级别中都有自己泾渭分明的位置。根据选择器种类的不同可以分为四类，也决定了四种不同等级的权重值。

行内样式（权重值：1000）

<p style="color: red;">这是行内式</p>

id选择器（权重值：100）

<style>
    #head{
        color: red;
    }
</style>

类选择器（权重值：10）

<style>
    .cl{
        color: red;
    }
</style>

元素选择器（权重值：1）

<style>
    p{
        color: red;
    }
</style>

技术图片

CSS常用属性

宽与高
- width：宽度（块级标签才能设置宽度，内联标签的宽度由内容来决定）
- height：高度

文字属性

字体：font-family
```
body{ 
    font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif 
}
```
可以将多个字体名称作为一个“回退”系统来保存,如果浏览器不支持第一个字体，则会尝试下一个
文字大小：font-size
```
p{ 
    font-size: 14px; 
}
```

文字粗细：font-weight

p{
    font-weight: bold;
}

值	描述
normal	标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值，默认值

文字颜色：color
```
p{
    color: red;
}
```
- 十六进制值：#808080
- rgb值：RGB(255,0,0)
- rgba值：rgba(255,0,0,0.5) 第四个值为alpha，指定色彩的不透明度，1：不透明，0：透明
- 颜色的名称：red
文字对齐：text-align
```
div{
    text-align: center;
}
```
值描述

left 左边对齐默认值

right 右对齐

center 居中对齐

justify 两端对齐

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

文字装饰：text-decoration

p{
    text-decoration: underline;
}

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

首行缩进：text-indent

p{
    text-indent: 2em;    /*首行缩进两个字*/
}

字间距：letter-spacing
```
p {
    letter-spacing: 5px;
}
```

背景

背景颜色：background-color

div{
    width: 200px;
    height: 200px;
    background-color: red;
}

背景图片

div{
    width: 200px;
    height: 200px;
    background-image: url("1.jpg") no-repeat;    /*最后一个设置平铺与不平铺*/
    /*
        repeat: 平铺（平铺：背景图片填满整个屏幕）
        repeat-x：向水平方向平铺
        repeat-y：向垂直方向平铺
        no-repeate：不平铺
    */
}

边框：border
```
div{
    border: 1px solid red;  /*第一个参数：边框粗细，第二个参数：边框样式，第三个参数：边框颜色*/
}
```
边框样式

值描述

none 无边框。

dotted 点状虚线边框。

dashed 矩形虚线边框。

solid 实线边框。

同时还可以设置四个边框的样式：
- border-top
- border-left
- border-right
- border-bottom

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

圆角：border-radius

div{
    width: 180px;
    height: 50px; 
    border: 1px solid red; 
    border-radius: 10px;
    /*
    一个参数：设置四个角的圆角
    两个参数：
      第一个参数：左上，右下
      第二个参数：右上，左下
    三个参数：
      第一个参数：左上
      第二个参数：右上，左下
      第三个参数：右下
    四个参数：左上，右上，右下，左下
    */
}

display属性

控制HTML元素的显示效果

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

display：none与visibility：hidden的区别：

visibility：hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。

display：none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。

外边距：margin

div{
    margin: 10px;
    /*
    一个参数：四个边
    两个参数：上下，左右
    三个参数：上，左右，下
    四个参数：上，右，下，左
    */
}

也可以四边单独设置

margin-top
margin-left
margin-right
margin-bottom

内填充：padding

div{
    padding: 10px;
    /*
    一个参数：四个边
    两个参数：上下，左右
    三个参数：上，左右，下
    四个参数：上，右，下，左
    */
}

也可以四边单独设置

padding-top
padding-left
padding-right
padding-bottom

浮动：float

脱离文档流向左浮动或向右浮动

div{
    width: 200px;
    height: 200px;
    float: left;
    border: 1px solid red;
}

值	描述
left	向左浮动元素。
right	向右浮动元素。
none	不允许浮动元素。

但是浮动有一个问题就是会脱离文档流使父级标签塌陷

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
          .a{
              border: 1px solid black;
              width: 800px;
          }
          .b{
              width: 200px;
              height: 200px;
              background-color: red;
              float: left;
          }
          .c{
              width: 200px;
              height: 200px;
              background-color: green;
              float: right;
          }
      </style>
  </head>
  <body>
      <div class="a">
          <div class="b"></div>
          <div class="c"></div>
      </div>
  </body>
</html>

为了解决这个问题可以使用clert来修复这个bug

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
          .a{
              border: 1px solid black;
              width: 800px;
          }
          .b{
              width: 200px;
              height: 200px;
              background-color: red;
              float: left;
          }
          .c{
              width: 200px;
              height: 200px;
              background-color: green;
              float: right;
          }
            .clearfix{
                clear: both;
            }
      </style>
  </head>
  <body>
      <div class="a">
          <div class="b"></div>
          <div class="c"></div>
            <div class="clearfix"></div>
      </div>
  </body>
</html>

clear属性

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

溢出：overflow

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

定位：position

值	描述
static	默认值。无定位。
relative（相对定位）	相对于未改变位置之前的位置，随父级标签移动，不脱离文档流。
absolute（绝对定位）	相对于未改变位置之前的最近定位，不随父级标签移动，脱离文档流。
fixed	相对于未改变位置之前的绝对与屏幕的位置，不随父级标签移动，脱离文档流

层级：z-index

设置对象的层叠顺序。层级越大显示越前，层级越小显示越后
不透明度：opacity

整体的透明度，整体的所有内容都会随不透明度的改变而改变。

CSS

标签：soft 水平 oss har 背景方式 gre sans mil

原文地址：https://www.cnblogs.com/Gredae/p/11724049.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行