web——css进阶

作者:小 琛
欢迎转载,请标明出处

选择器进阶

后代选择器

语法:选择器1 选择器2

根据嵌套关系,在选择器1中选择后代中所有满足内容的标签

子代选择器

语法:选择器1>选择器2

在选择器1中,寻找子代且只有子代的标签

并集选择器

语法:选择器1,选择器2

从标签中,选择包含选择器1或选择器2的内容

交集选择器

语法:选择器1.选择器2

从标签中,选出既有1又有2的内容

hover伪类选择器

语法:选择器1:hover

效果:当鼠标hover对应内容时,执行对应操作

背景

  • background-color 背景色
  • background-image 背景图片
    可以配合:url()完成添加图片操作
  • background-repeat 平铺
    有三个参数:no-repeat(不平铺)、repeat-X(X方向)、repeat-Y(Y方向)
  • background-position 背景位置
    水平参数:left、right、center
    垂直参数:top、center、bottom、
    同时支持数字+px,可以设置负值,效果为部分内容被隐藏

背景相关内容的设置支持多元素同时设置,例如:
background:color url repeat positon

继承、层叠属性

继承:子代标签可以继承父代标签的相关css设置

  • 控制文字的内容可继承(两个例外),其余无法继承
  • 这种继承不是绝对的,部分内容不支持继承,例如a标签的color不会继承、h系列的font-size不会继承

层叠:当某个内容被重复定义,以后定义覆盖前定义为主

根据这个属性,可以简化工作量,例如:在body设定所有字体为16px,后续特殊的字体进行特殊设定即可

显示模式

块、行内、行内块

块:某一块内容
行内:某一行支持多个元素
行内块:两者均具备

转换

转为块级:display:block
转为行内块:display:inline-block
转为行内:display:inline

例子

web——css进阶_第1张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航title>
    <style>
        .background{
            width: 100px;
            height: 50px;
            background-color: brown;
            display: inline-block;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            color: aliceblue;
            text-decoration: none;
        }
        a:hover {
            background-color: coral;
        }
    style>
head>
<body>
    <a href="#" class="background">导航1a>
    <a href="#" class="background">导航2a>
    <a href="#" class="background">导航3a>
    <a href="#" class="background">导航4a>
    <a href="#" class="background">导航5a>
body>
html>

你可能感兴趣的:(web前端,css,前端,css3)