Day2 2023/2/9-CSDN博客

本文链接：https://blog.csdn.net/weixin_58606013/article/details/129264915

Css层叠样式表

1.核心语法

选择器{

属性名：属性值；

}

如何使用：

通过link标签 href属性引入样式表

例：<link rel="stylesheet" href="../css/work1.css">

2.选择器

选择标签的方法

四个基本选择器：

①全局选择器通配符选择器选择页面所有的标签通配符：*

语法： *{

属性名：属性值；

}

②标签选择器直接通过标签名选择相应标签

语法：标签名{

属性名：属性值；

}

③class类选择器通过给标签设置class属性在CSS里 .类名选中相关标签

语法： .class名{

属性名：属性值；

}

同一个类名可以重复使用

同一个标签可以有多个类名（空格隔开多个类名）

④ID选择器通过给标签设置ID属性在CSS里面 #id选中相应标签

语法： #ID名{

属性名：属性值；

}

同一个ID不可以重复使用

同一个标签不能有多个ID

⑤子级选择器

x>y

选择x元素的子级元素y

3.基本属性

文字属性：

文字大小（font-size 默认16px 最小12px 不可奇数）

文字加粗（font-weight bold加粗 normal 默认值)

文字倾斜（font-style italic ）

文字颜色 color 属性值： RGB / 16进制 / 颜色英文单词

文本属性

文本水平对齐方式 text-align 左 left 居中center 右right

文本首行缩进 text-indent +px +em（字符可负值

文本行高 line-height 数值+px 当line-height=height时文字垂直方向居中

文本字间距 letter-spacing 词间距 word-spacing(英文单词间距)

文本修饰 text-decoration

下划线 underline

去掉下划线 none

删除线 line-through

超出线 overline

属性有继承性

子元素继承父亲元素属性大部分文本都可继承

超链接特殊 a标签自带属性颜色无法继承父系文字颜色

4.背景属性

背景颜色 background-color

背景图片 background-image：url（图片路径）

背景图片平铺 background-repeat： no-repeat（不平铺）

背景图片定位 background-position：center；

学习练习图:

<!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>
    <link rel="stylesheet" href="../css/work3.css">
</head>

<body>
    <div class="logo">
        <img src="../img/work.jpg" alt="logo" title="logo">
    </div>
    <p class="head">网络整合营销</p>
    <p class="by">微信营销推广</p>
    <p class="by">企业社交管理</p>
    <p class="by">网络活动策划</p>
    <p class="by">搜索引擎优化</p>
</body>

</html>

.logo{
    text-align: center;
    

    
}

.head{
    text-align: center;
    color:#646464;
    font-size: 36px;
}

.by{
    text-align: center;
    color:#646464;
    font-size: 24px;
}

Day2学习结束