CSS学习_01(零基础学习)

最新推荐文章于 2024-10-01 23:20:42 发布

我会一直陪着你

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量167

点赞数 5

分类专栏： HTML和CSS的学习文章标签： css 学习前端

本文链接：https://blog.csdn.net/qiwulmj/article/details/134146334

版权

HTML和CSS的学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了CSS的基础知识，包括CSS的三种书写方式（内嵌式、外联式和行内式），基础选择器（标签、类、ID和通配符），以及部分CSS属性如字体、文本样式和颜色的使用。还提供了两个实践小练习帮助读者巩固所学。

摘要由CSDN通过智能技术生成

(温馨提示,这里可以去我的博客里复习一下我之前写过的HTML)

这里介绍了CSS的书写的方式,基础选择器,和CSS部分属性的学习,最后还有两个案例,其他的内容在下一篇博客.

1.什么是CSS???作用是什么???

答:CSS就是为了给HTML做美化的(这里没有没有对HTML不太清楚的想学习或者这是想复习一下的可以看我的里面的一篇HTML博客).HTML就相当于没穿衣服的人,而CSS就相当于给人穿上各式各样的衣服

2.CSS写在哪里?

1.内嵌式:CSS写在style标签中

注意:style标签可以写在任意位置,但是通常约定写在head标签中

使用场景:小案例

2.外联式:CSS写在一个单独的.css文件中

提示:通过link标签在网页中引入

使用场景:项目中

3.行内式:CSS写在标签的style属性中

提示:不推荐使用

使用场景:配合js使用

3.基础选择器

1.标签选择器

就是我们学html标签例如p,div,span,h1~~~等等.他们加{}即p{},div{}就为标签选择器.

缺点是什么?如果我们给p标签赋予样式,则所有的p标签都带该样式了

2.类选择器

在style标签中要以点开头,在具体的标签中以class引用不带点.例

注意:1.所有的标签上都有class属性,class属性值为类名

2.类名可以以数字,字母,下划线,中划线,但不能以数字或者中划线开头

3.一个标签可以有多个类名,类名之间以空格隔开

4.类名可以重复,一个类选择器可以同时选中多个标签

3.id选择器

结构:#id属性值{css属性名:属性值;}

作用:找到页面中带有这个id属性值的标签,设置样式

注意:1.所有的标签中都有id属性

2.id属性值在页面中是唯一的,不可以重复

3.一个标签中只能有一个id属性值

4.一个id选择器只能选中一个标签

注意:有人可能会问好像id选择器能干的事情不就是类选择器干的事情吗?为什么还要有id选择器的存在呢?

答:id选择器不是用来搞CSS样式的,他是为了后期js才使用的,我们一般写样式就用类选择就够用了

4.通配符选择器

结构:*{}

作用:找到页面中所用的标签样式

注意:开发中极少使用,记住一点就好了开发中常常有默认的margin和padding我们用

*{
  margin:0
  padding:0
}

来消除所有标签的默认内外边距 (margin和padding后面会讲)

4.CSS属性的学习

1.字体

1.font-size: 字体大小取值:数字+px 例:30px(默认是16px)

2.font-weight:字体粗细

font-weight:normal 正常, bold加粗

font-weight;100~900 400正常 700粗的

3.font-style:文字倾斜 normal正常 italic倾斜

4.font-family:字体样式宋体微软雅黑楷体

5.font:style weight size family 简写font复合属性

注意:可以通过后面也写属性,来覆盖前面写过的属性

2.文本样式

1.文本缩进:text-indent

text-indent:数字+px 表示缩进多少像素(你大可以先用font-size设置大小,然后再用这种方法来设置缩进两个字符,但这样太麻烦)

text-indent:数字+em 表示缩进多少字符(当前font-size大小)推荐

2.文本水平text-align

text-align:left 左对齐. center居中对齐. right右对齐

3.文本修饰text-decoration

text-decortation:underline(下划线) line-through(删除线) overline(上划线) none(无装饰线)

这个属性一般都在a标签中使用,因为超链接自带下划线,一般都是为了去掉下划线.只记住这一点就好了,后面会常用这点

4.行高line-height

(你看下面示例图片浏览器中段落之间不是紧挨着的)

line-height:数字+px or 倍数(是针对于font-size)

line-height=上间距+font-size+下间距

font:style weight size/line-height family;

5.颜色color四种写法

文字颜色:color 背景颜色background-color

1.关键字:red,pink,green等等

2.rgb表示法:rgb(0,0,0) 每个取值0~255

3.rgba表示法:rgba(0,0,0,0) 前三个取值0~255 最后一个取值0~1

4.十六进制表示法:#000000 六位每位取值0~F

注意:这里到底该给谁加入居中样式,才能是我们想要的居中效果?或者说test1,test2样式到底放在哪呢?

答:谁包裹住它就给谁加,在上面p标签包裹住了文字就给p加,所以例如我们想让一张图片居中我们该怎样做呢? ---注意这里图片就是img不能在img标签上添加居中属性在他的父标签中添加

6.标签居中(拓展)

使用margin: 0 auto;0表示上下的外边距为0,auto左右外边距相等(常用后面会说)

3.两个小练习

1.练习1

制作一个类似的页面(当你第一时间看到他,你觉得他的难度如何代表了你上面掌握的如何,这个案例所需要的东西上面都是有的,文字都不重要随便写就好)

<!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>
        div {
            margin: 0 auto;
        }

        .color1 {
            color: #808080;
        }

        .color2 {
            color: #87ceeb;
        }

        p {
            text-indent: 2em;
        }

        div {
            border: 1px;
            border-color: red;
            width: 400px;
            height: 600px;
            margin: 0 auto;
            background-color: pink;
        }

        .text_align {
            text-align: center;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>

<body>

    <div>
        <h1 class="text_align">哈哈哈哈哈哈哈</h1>

        <p class="text_align">
            <span class="color1">2099.99.99</span>
            <span class="color2">哈哈哈</span>
            <a href="#">哈哈哈</a>
        </p>
        <hr>

        <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>

        <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>

        <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>

    </div>

</body>

</html>

注意:这里好像用行内式会简单一点,.不用那么复杂,确实如此.但是如果后期东西,样式比较多的话,代码就会显得很乱,不方便看懂

2.练习2

完成到这样就ok了,你们写的时候可能还是会遇到两个问题,

第一个问题

1.margin:0 auto 你想让那个标签有这个效果直接在该标签上加

2.text-align:center 你想实现文字,图片的居中,那个标签包裹住了它,就在那个标签上加

第二个问题

line-height:是给字体使用的,其字体会自动在line-height中间

height:是高度,字体不会自动在height的中间

代码如下

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .color1 {
            background-color: pink;
            /* width: 300px;
            height: 350px;
            margin: 0 auto; */
        }

        .color2 {
            background-color: #ffffff;
            width: 234px;
            height: 300px;
            margin: 0 auto;
            text-align: center;
        }

        img {
            width: 160px;

        }

        h3 {
            font-size: 14px;
            line-height: 25px;
        }

        .p1 {
            font-size: 12px;
            color: #cccccc;
            height: 30px;

        }

        .p2 {
            font-size: 14px;
            color: #ffa500;
        }
    </style>
</head>

<body class="color1">
    <div class="color2">
        <img src="./img/test.jpg" alt="图片">
        <h3>图片</h3>
        <p class="p1">一张好图片</p>
        <p class="p2">1999元
        </p>
    </div>


</body>

</html>

如果你看到这里啦,谢谢你对作者的支持,博客里还有CSS学习_02,希望能帮到你

点个赞吧谢谢啦!!!!!!