CSS入门学习笔记

河桥清光

已于 2022-10-14 16:26:24 修改

阅读量775

点赞数

文章标签： css 学习前端

于 2022-10-14 15:47:29 首次发布

本文链接：https://blog.csdn.net/qq_62637200/article/details/127254987

版权

前言

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言。

CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题，用于设置和布置 网页 - 例如，更改内容的字体，颜色，大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。

基础选择器

基础选择器是由单个选择器组成的。

基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器

标签选择器：可以选出所有相同的标签，比如段落p

    <p>过去</p>
    <p>现在</p>
    <p>未来</p>

在<head>语句里

    <style>
    p {
        color:pink;
    }
   </style>

类选择器：单独选一个或者某几个标签

<div class="red">变红色</div>

在<head>语句里

   <style>
     .red {
       color:red;
    }
   </style>

id选择器：一次只能选择一个标签

<div id="pink">pig</div>

同样在<head>语句里

   <style>
    #pink {
        color:pink;
    }
   </style>

通配符选择器：使用“ * ”定义，它表示选取页面中所有元素（标签）

    * {
        属性1:属性值1;
        属性2:属性值2;
    }

字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细、和文字样式（如斜体）

1.字体系列

CSS使用font-family属性定义文本的字体系列

p {
    font-family:"微软雅黑";
}
div {
    font-family:Arial,"Microsoft Yahei","微软雅黑";
}

最常见的几个字符：

body {
    font-family:"Microsoft Yahei",tahoma,arial,"Hiragino Sans GB";
}

2.字体大小

CSS使用font-size属性定义字体大小

p {
    font-size:20px;
}

px（像素）大小是网页的最常用的单位

3.字体粗细

CSS使用font-weight属性设置文本字体的粗细

p {
    font-weight:bold;
}

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100-900	400等同于normal，700等同于bold，数字后面不跟单位

实际开发时更喜欢用数字表示粗细

4.文字样式

CSS使用font-style属性设置文本的风格

p {
    font-style:normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式 font-style；normal；
italic	浏览器会显示斜体的字体样式

5.字体复合属性

body {
    font:font-style font-weight font-size/line-height font-family;
}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开

size和family必须同时出现

文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

1.文本颜色

div {
    color:red;
}

表示	属性值
预定义的颜色值	red，green，blue，还有我们的御用色pink
十六进制	#FF0000，#FF6600，#29D794
RGB代码	rgb（255，0，0）或rgb（100%，0%，0%）

2.对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式

div {
    text-align:center;
}

属性值	解释
right	左对齐（默认值）
right	右对齐
center	居中对齐

3.装饰文本

text-decoration属性规定添加到文本的修饰

div {
    text-decoration:underline;
}

属性值	描述
none	默认。没有装饰线（最常用）
underline	下划线。链接a自带下划线（常用）
overline	上划线
line-through	删除线

4.文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

div {
    text-indent:10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值

div {
    text-indent:2em;
}

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

5.行间距

line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

p {
    line-height:26px;
}

CSS引入的三种方式

1.行内样式表（行内式）

行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式。

<div style="color:purple ; font-size:24px;">穿越时空的思念</div>

2.内部样式表（嵌入式）

内部样式表（内嵌样式表）是写到html页面内部，是将所有的CSS代码抽取单独放到一个<style>标签里。

    <style>
    div {
        color: purple; 
        font-size:24px;
    }
   </style>

3.外部样式表（链接式）

目前的做法倾向于利用最普遍且有用的方式——在文档的开头链接 CSS。在自己创建的 HTML 文档（如命名index.html)的相同目录创建一个文件，保存并命名为 styles.css。

①新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。

②在HTML页面中，使用<link>标签引入这个文件。

如创建style.css：

  div {
    color:purple ; 
    font-size:24px;
 }

在html文档里的<head>标签内：

<link href="style.css" rel="stylesheet">

属性 rel，让浏览器知道有 CSS 文档存在（所以需要遵守 CSS 样式的规定），并利用属性href 指定，寻找CSS文件的位置。

综合案例-产品模块

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

<body>
    <div class="box">
        <img src="/image.webp" alt="男子运动鞋" title="耐克乔丹AJ">
        <p class="word">快递服务较好,穿着较舒服</p>
        <div class="user">来自于 岁月静好 的评价</div>
        <div class="info">
            <h4> <a href="#"> Jordan官方耐克乔丹AJ男子...</a></h4>
            <em>|</em>
            <span>￥1299</span>
         </div>        
    </div>
</body>
</html>

* {
    margin:0;
    padding:0;
}

body {
    background-color: #f5f5f5;
}

a {
    color:#333;
    text-decoration:none;
}

.box {
    width: 320px;
    height: 530x;
    background-color: #fff;
    /* 盒子水平居中对齐 */
    margin:100px auto;
}

.box img {
    /* 图片宽度一样宽 */
    width: 100%;
}

.word {
    height:25px;
    font-size:14px;
    padding:0 28px;
    margin-top: 30px;
}

.user {
    font-size:12px;
    color:#b0b0b0;
    padding:0 28px;
    margin-top:20px;
}
.info {
    font-size:14px;
    padding:0 28px;
    margin-top: 15px;
}

.info h4 {
    display:inline-block;
    font-weight:400;
}

.info span {
    color:#ff6700;
}

.info em{
    font-style:normal;
    color:#ebe4e0;
    margin:0 6px 0 15px;
}

结果实现：