CSS&结构伪类选择器&属性选择器(重要)&美化网页元素

以下是对CSS(结构伪类选择器(避免使用，class,id选择器),属性选择器(重要)等)的学习

结构伪类选择器(避免使用，class,id选择器)

带冒号都是伪类选择器
1 ul li:first-child

1
2
3
4
5
6
7
8
/* ul的第一个子元素 */
ul li:first-child {
  background: tomato;
}
/* ul的最后一个元素 */
ul li:last-child {
  background: turquoise;
}

2 p:nth-child(1) (nth父元素)

1
2
3
4
5
6
    /* 选中p1: 定位到父元素，选择当前的第一个元素 
选择当前p元素的父级元素，选择父级元素的第一个,并且是当前元素才生效
*/
    /* p:nth-child(1){
      background: violet;
  } */

3 p:nth-of-type(1) 

1
2
3
4
/*  选中父元素，下的p元素的第一个，按类型选类型  */
p:nth-of-type(1) {
  background: yellow;
}

4 a:hover(鼠标悬浮的颜色 (重要))

1
2
3
a:hover {
  background: yellow;
}

属性选择器(重要)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
  <style>
    .demo a {
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: lightgreen;
      text-align: center;
      color: gainsboro;
      text-decoration: none;
      margin-right: 5px;
      font: bold 20px/50px Arial;
      line-height: 50px;
    }
    /* 属性名， 属性名= 属性值（正则）
=绝对等于
*=包含这个元素
^= 以这个开头
$= 以这个结尾
 */

    /* 存在id属性的元素   a[]{} */
    /* a[id]{
    background: yellow;
} */
    /*id=first的元素  */
    /* a[id=first]{
    background: violet;
} */
    /* class 中有links的元素 */
    /* a[class*="links"]{
    background: yellow;
} */

    /* 选中href中以http开头的元素 */
    /* a[href^=http]{
background: yellow;
    } */
    /* 选中href中以doc结尾的元素 */
    a[href$='doc'] {
      background: yellow;
    }
  </style>

  <body>
    <p class="demo">
      <a href="http://www.baidu.com" class="links item first" id="first">1</a>
      <a href="http://www.baidu.com" class="links item active"target="_blank" title="test" >2</a>
      <a href="images/123.png" class="links item">3</a>
      <a href="images/123.png" class="links item">4</a>
      <a href="images/123.jpg" class="links item">5</a>
      <a href="abc" class="links item">6</a>
      <a href="/a.pdf" class="links item">7</a>
      <a href="/a.pdf" class="links item">8</a>
      <a href="abc.doc" class="links item">9</a>
      <a href="abcd.doc" class="links item">10</a>
    </p>
  </body>

美化网页元素

  1. 有效的传递页面信息
  2. 美化页面，页面漂亮，才能吸引用户
  3. 凸显页面的主题
  4. 提高用户的体验

span标签：重点要突出的字，使用span套起来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <!-- font-family:字体
   font-size:字体大小
   font-weight:字体粗细
   color:字体颜色
-->
 <style>
   body {
     font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
     color: blue;
   }
   h1 {
     font-size: 50px;
   }
   .p1 {
     font-weight: lighter;
   }
 </style>

文本样式

  1. 颜色 color rgb rgba
  2. 文本对齐的方式 text-align(重要)
  3. 首行缩进 text-indent: 2em; (重要)
  4. 行高 line-height(单行文字上下居中)(重要)
  5. 装饰 text-decoration
  6. 文本图片水平对齐 vertical-align: middle;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    </head>
     <!-- 
       颜色：
               单词
               RGB  0~F
               RGBA  A :0~1
               text-align:  排版，居中
               text-indent: 2em;  段落首行缩进
           line-height: 300px;  
           行高，和块的高度一致，就可以上下居中  
    -->

     <style>
       h1 {
         color: red;
         text-align: center;
       }
       .p1 {
         text-indent: 2em;
       }

       .p3 {
         background: chartreuse;
         height: 300px;
         line-height: 300px;
       }
       /* 下划线 */
       .l1 {
         text-decoration: underline;
       }
       /* 中划线 */
       .l2 {
         text-decoration: line-through;
       }
       /*上划线  */
       .l3 {
         text-decoration: overline;
       }
       img,
       span {
         vertical-align: middle;
       }
     </style>

     <body>
       <p class="l1">123123</p>
       <p class="l2">123123</p>
       <p class="l3">123123</p>

       <h1>故事介绍</h1>
       <p class="p1">
         平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！
       </p>
       <p>
         在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。
       </p>
       <p class="p3">
         I have searched a thousand years,And I have cried a thousand tears.
       </p>
     </body>

    超链接伪类

    正常情况下， a:hover
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
        /* 默认的颜色 */
      a {
        text-decoration: none;
        color: #000;
      }
      /* 鼠标悬浮的颜色 (重要)*/
      a:hover {
        color: orange;
        font-size: 50px;
      }
      /* 鼠标按住未释放的状态 */
      a:active {
        color: green;
      }

      /*  text-shadow   阴影颜色，水平偏移，垂直偏移，阴影半径*/
      #price {
        text-shadow: blue 10px 10px 2px;
      }
    </style>

    列表样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /* ul  li */
    /* 
    list-style::
    none  去掉原点
    circle  空心圆
    decimal  数字
    square  正方形
    */
    ul  li{
        height: 30px;
        list-style: none;
        text-indent: 1em;
          }

    图片平铺方式渐变(background-repeat)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <style>
      div {
        width: 1000px;
        height: 700px;
        border: 1px solid red;
        background-image: url('image/1.jpg');
        /* 默认是全部平铺的 */
      }
      <!-- 沿x轴平铺 -->
      .div1 {
        background-repeat: repeat-x;
      }
          <!-- 沿y轴平铺 -->
      .div2 {
        background-repeat: repeat-y;
      }
      .div3 {
        background-repeat: no-repeat;
      }
    </style>

    背景渐变

    1
    2
    3
    4
    5
    6
    7
    <!--径向渐变，圆形渐变  -->
    <style>
      body {
        background-color: #00dbde;
        background-image: linear-gradient(45deg, #00dbde 0%, #fc00ff 100%);
      }
    </style>
    开源项目网址

基于B站视频学习 特别感谢up主 遇见狂神说