CSS-day01-黑马程序员前端

CSS第一天

主题思路

CSS网页美容-CSS初识-引入CSS样式-CSS文字文本样式-CSS调试工具-Sublime快捷语法emment

HTML的局限性

HTML只关注内容的语义，有很多局限性：

  1. 满足不了设计者的需求，页面通常很丑；
  2. 操作极不方便，例如更改高度，需要在每个标签内部进行更改 ；
  3. 臃肿繁琐 即便操作成功了，代码也会极为臃肿；

CSS网页的美容师

  • 让我们的网页更加丰富多彩，布局更加灵活
  • CSS最大的贡献就是：让HTML从样式中脱离，实现了HTML专注去做结构呈现，样式交给CSS；结构与样式相分离。

CSS初识

CSS（cascading style sheets）CSS层叠样式表（级联样式表）
作用:

  • 主要用于设置 HTML页面中的文本内容（字体大小对齐方向等）、图片的外形（高宽，边框样式，边距）以及 版面的布局和外观显示样式。
  • CSS以html为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以根据不同的浏览器设置不同的样式。

引入CSS样式表

  1. 行内样式表
    通过在标签内部引入style属性，对HTML的样式进行操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 行内样式表 -->
    <h1 style = "color:pink; font-size:28px; " >世纪佳缘，我也在这里等你</h1>
</body>
</html>

缺点：CSS是为了将结构和样式分离，但行内样式表将样式写到了结构中，并没有实现CSS的目的。

  1. 内嵌样式表
    内嵌样式表，通常写在head中，对同类型标签（选择器）做统一更改,初步实现结构与样式相分离
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type = "text/css">
        h3{color: green;
           font-size: 30px;}
        h5{color:purple; font-size: 20px;}
        p{color: blue; }
    </style>
</head>
<body>
    <h3>忆江南 唐.白居易</h3>
    <p>江南好，风景旧曾谙</p>
    <p>日出江花红胜火</p>
    <p>春来江水绿如蓝</p>
    <p>能不忆江南</p>

    <h5>作者介绍</h5>
    <p>白居易（772年－846年），字乐天，号香山居士，又号醉吟先生，祖籍山西太原，
    到其曾祖父时迁居下邽，生于河南新郑。是唐代伟大的现实主义诗人，唐代三大诗人之一。
    白居易与元稹共同倡导新乐府运动，世称“元白”，与刘禹锡并称“刘白”。</p>   
</body>
</html>
  1. 外部样式表，真正实现了分离。
    将HTML文件和CSS文件分离并用link相连接：
  • HTML文件，添加link标签
    link标签属性
<!DOCTYPE html>
<html lang="en">
    <!-- 内嵌样式表，通常写在head中，对同类型标签做统一更改,初步实现结构与样式相分离-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h3>忆江南 唐.白居易</h3>
    <p>江南好，风景旧曾谙</p>
    <p>日出江花红胜火</p>
    <p>春来江水绿如蓝</p>
    <p>能不忆江南</p>

    <h5>作者介绍</h5>
    <p>白居易（772年－846年），字乐天，号香山居士，又号醉吟先生，祖籍山西太原，
    到其曾祖父时迁居下邽，生于河南新郑。是唐代伟大的现实主义诗人，唐代三大诗人之一。
    白居易与元稹共同倡导新乐府运动，世称“元白”，与刘禹锡并称“刘白”。</p>
    
</body>
</html>
  • style.css文件
h3{
    color: green;
    font-size: 30px;
}
h5{color:purple; font-size: 20px;}
p{color: blue; }

优点：可实现实现样式表共享

三种样式表总结
三种样式表总结

CSS基础选择器

  1. 选择器的作用：
    找到特定的html标签
  2. id选择器和类选择器的区别
    选择器分为 基础选择器 和复合选择器，一下为基础选择器
    标签选择器：以标签名作为选择器；缺点是不能差异化对相同标签设计不同的样式；
    类选择器：定义类，在标签中调用类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 通过（.类名）定义类名，然后标签内调用 -->
    <style>
        .red {
            color: red;
            }
    </style>    
</head>
<body>
    <div>不用不调用</div>
    <div class = "red">谁用谁调用</div>
</body>
</html>

id选择器，id选择器和类选择器的区别是，前者只能调用一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
<p>愿你归来仍是少年</p>
<p>当然那是不可能</p>
<p id="pink">因为你不能加速到接近光速</p>
</body>
</html>

通配符选择器 ： *

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color: blue;
        }
    </style>
</head>
<body>
    <p> 这是一段文字</p>
    <h5>这是不同的标签下的另一段文字</h5>
</body>
</html>

下面的代码可以清空所有的HTML标记的默认边距，某些特殊情况下会使用。

*{
    margin:0;
    padding:0;
}

基础选择器总结
在这里插入图片描述
不推荐使用无语义定义的标签选择器如span和div
在这里插入图片描述

文字文本样式

font-size
font-famliy不同字体的英文名称和Unicode编码，通过font-family:"字体名称"指定。
通常仅使用微软雅黑和宋体。
在这里插入图片描述
font-weight：400=normal，700=bold；
font-style：normal， italic
综合写法 font: font-style font-weight font-size/line-height font-family; 严格按照这个顺序来写。字号和字体类型必须写，不然font属性无法启用。通常只需要指定字号和字体。

				/* font: font-style font-weight font-size/line-height font-family;*/
        .title {
            font: italic 700 20px "微软雅黑";
        }

在这里插入图片描述

CSS外观属性总结

在这里插入图片描述

emment快捷键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    div
    <div></div>
    
    div*3
    <div></div>
    <div></div>
    <div></div>
    
    ul>li*3
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
    div+p*3
    <div></div>
    <p></p>
    <p></p>
    <p></p>
    
    .demo*3
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    
    .demo$*3
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
</body>
</html>
版权声明：本文为CFZhang0852原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。