HTML5&CSS3_day04


HTML5&CSS3_day04

后代选择器

后代选择器(所有后代,儿子孙子等等)用空格,子代选择器(父子关系)用>

50

选择器间用空格隔开51

并集选择器

选择器间用逗号,隔开

52

53

交集选择器

1.交集选择器必须满足多个条件

2.选择器之间是紧挨著的,中间没有间隔字符

3.书写时,标签选择器在前面,类选择器在后面

4.由于id属性具有唯一性,一般ID选择器是不参与交集选择器的

5.当交集选择器都是标签选择器或者都是类选择器时,才可以互换位置

54

55

伪类选择器

选择器:hover{},任何标签都能添加伪类,如当前这个鼠标悬停出现样式

56

57

emmet语法

58

为了更快的打代码

背景属性

59

rgba的a取值卫0-1

背景图片

60

当盒子的大小大于图片,将自动用多个图片补齐

当只想出现一个图片怎么办呢?

1-设置盒子的大小和图片一样

2-背景平铺

61

repeat复制,平铺的意思

平铺的意思就是把区域沾满,默认为全部平铺,当x平铺则水平铺满

62

背景位置

63

当水平垂直取值一样,可省略只写一个

默认取值为background-position: 0 0 ,当取值为像素px,则在坐标0 0 的基础上移动,如20px 60px则向右移动20px,向下移动60px

64

如果给的是负数,则向左和向上移动

背景属性连写

65

这个书写顺序可以打乱,自动识别,不像font的属性连写必须按照style weight size family的顺序写

原因应该是font的这四个属性可能相似,不好自动识别出来,所以规定了顺序

66

position中数值不可以颠倒顺序,写center botton可以颠倒

背景图和img插入图区别

重要的图片,比如你卖的产品用img,用来装饰的用背景图

元素的显示模式(块,行内,行内块)

67

块元素,独占一行,可以设置宽和高,宽度默认与父级一样

68

行内元素不能设置宽高,你设置了宽高也没反应,只与内容大小相关

行内块元素,一行能显示多个,设置宽高还能生效

69

元素显示模式的转换

70

display显示展示,block块

元素嵌套

一般来说,大的可以套小的,如块元素里面可以有块与行内,行内不能嵌套块

71

p不能套和h1,h1也不能套p,因为一段文字不能即是段落,又是标题

同时也不能嵌套自己,如p套p,无意义、

a可以嵌套任何标签,但不能套自己

css特性(继承与层叠)

72

注意:控制文字的都可以继承,不是文字的都不能继承。

inherited继承

73

其中span没有设置css,但会继承父类div的css

注意

css中的height属性和width属性都是设置的标签,不是设置文字,设置文字的为font-size:xxpx,所以不能被继承

继承的几个特殊

75

层叠性

76

案例

77

多行输入快捷键

78

alt+shift+单击

需求分析

1-这是五个超链接加了宽高和背景颜色(a是行内元素无法设置宽高,所以要先设置为行内块元素)

2-去除了超链接的默认下划线,设置了字体为白色

3-字体居中,上下居中用行高line-height设置

4-伪类a:hover让鼠标移上去变成黄色

<!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>Document</title>
    <style>
        a{
            background-color: red;
            color: #fff;
            width: 100px;
            height: 50px;
            display: inline-block;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
        }
        /* yellow太花看不清楚就不设置了 */
        a:hover{
            background-color: rgba(3, 55, 33, .5);
        }
    </style>
</head>
<body>
    <a href="">导航1</a>
    <a href="">导航2</a>
    <a href="">导航3</a>
    <a href="">导航4</a>
    <a href="">导航5</a>
</body>
</html>

案例二

79

需求分析

1-与第一个案例一样,只是背景改成了图片

2-如果需要每个a单独设置不同的颜色,利用类选择器多写几个就行

<!-- <!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>Document</title>
    <style>
        a{
            background-color: red;
            color: #fff;
            width: 100px;
            height: 50px;
            display: inline-block;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
        }
        /* yellow太花看不清楚就不设置了 */
        a:hover{
            background-color: rgba(3, 55, 33, .5);
        }
    </style>
</head>
<body>
    <a href="">导航1</a>
    <a href="">导航2</a>
    <a href="">导航3</a>
    <a href="">导航4</a>
    <a href="">导航5</a>
</body>
</html> -->
<!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>Document</title>
    <style>
        a{
            background-image: url(./picture/cgx.jpg);
            background-color: red;
            /* 这个背景色照样生效,但是背景图片在颜色上面,所以被背景图片覆盖,无法显示 */
            color: #fff;
            width: 100px;
            height: 50px;
            display: inline-block;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
        }
        /* yellow太花看不清楚就不设置了 */
        a:hover{
            background-image: url(./picture/zhouyu.gif);
        }
    </style>
</head>
<body>
    <a href="">五彩导航</a>
    <a href="">五彩导航</a>
    <a href="">五彩导航</a>
    <a href="">五彩导航</a>
    <a href="">五彩导航</a>
</body>
</html>

点我游览下一篇


文章作者: 瑾年
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 瑾年 !
评论
  目录