CSS基本知识点(自学)

!!!为什么要用CSS修改样式，不直接用标签里面的属性，因为麻烦，而且需要记忆的点很多，所以用CSS来修改样式，不用记忆哪些属性属于哪个标签，而且当需求变更时不需要修改大量的代码就可以满足要求，在前端开发时，CSS只有一个作用就是修改样式！！！
注意：CSS代码写在<head>和</head>之间的<style>样式</style>之间

1.初识CSS：

用CSS代替在标签中一点一点的更改样式！更加方便快捷
在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初识CSS</title>
    <style type="text/css">
        h2{ 
            text-align: center; <!--修改文字的位置（居中）-->
            color:#FF0004; <!--修改文字颜色-->
            font-family: "微软雅黑"; <!--修改文字字体-->
        }
        p{ <!--找到当前网页上所有为p的标签，对其样式进行修改-->
            text-align: center;
            color: mediumslateblue ;
            font-size="10px";    <!--修改文字大小-->
            font-family: "Times New Roman";
            font-weight: "600px"; <!--修改文字粗细-->
        }
    </style>
</head>

<body>
    <h2>独自美丽</h2>
    <p>Love is love</p>
    <p>Man always love beause of romantic</p>
    <p>想来生活无非是痛苦和美丽</p>
    <p>落日和你</p>
</body>
</html>

注意：1. style标签一定是写在<head>中！2.style{}中的属性一定要在末尾加上；号！

2.学习CSS标签：

主要学习属性以及属性的值，还有选择器{}前面的值，例如p{}。

(1)文字的样式、粗细、大小、字体的属性：

在这里插入图片描述

<head>
<style type="text/css">
        p{
           font-style: italic;   /*文字样式，按fs加tab键即可自动生成*/
            font-weight: "400";  /*字体粗细，有极限值,快捷键是fw加tab键*/
            font-weight: bold ;  /*加粗，快捷键是fwb加tab键*/
            font-weight: bolder; /*比加粗更粗,快捷键是fwbr加tab键*/
            font-weight:lighter; /*细线,快捷键是fwl加tab键*/
            font-size: "300px" ; /*文字大小，一定要带单位px单位,快捷键是fz加值加tab键*/
            font-family: "楷体";  /*设置字体,快捷键是ff加tab键*//*中文需要加""号*/
        }
        h1{
            font-style: italic;
            font-weight: bold;
            font-size: 20px;
            font-family: "楷体";   
        }
 </head>
</style>
    <body>
    <h1>独自美丽</h1>
</body>

注意在字体这里可能有特殊需求：
1、如果设置的字体系统没有，可以用系统默认字体或者多写几个字体做备用。
2、英文字体不适用中文，但是中文字体可以适用于中文，利用这一点，我们可以让中文、英文的字体不一样。英文样式在前，中文样式在后。

在这里插入图片描述

p{
            text-align: center;
            font-family: "Times New Roman","宋体";
            font-weight: bold;
            
  }
<p>Man Alwags love 想来生活无非是痛苦 pain 和美丽 beautiful</p>

注意：
1.中文常用字体：宋体、黑体、微软雅黑。
2.英文常用字体：Times New Roman、Arial。
3.不是因为名称的字体就一定是应用于英文的字体，每一个中文字体也都有一个英文名。宋体：SimSun 黑体：SimHei 微软雅黑：Microsoft YaHei

3. font属性缩写：

但是在这里只能省略style 或者 bold 属性值，其他不能省略，并且位置也不能交换

 /*文字属性的缩写 font：文字样式 是否加粗 文字大小 文字字体*/
        p{
            font: italic bold 20px "宋体" 
        }

（2）文本属性：文本装饰（text-decoration）、文本水平对齐(text-align)、文本缩进的属性

在这里插入图片描述

 <style type="text/css">
        p{
            /*缩写就是td+值加tab键*/
            text-decoration: underline;/*下划线*/
            text-decoration: overline; /*上划线*/
            text-decoration: none;     /*可以去除下划线，比如a标签中超链接的下划线*/
            text-decoration: line-through;/*删除线*/

            text-align: center;  /*文本居中*/
            
            text-indent: 20px;   /*文本缩进，单位是像素*/
            text-indent: 2em;    /*缩进两个文字,em是文字的单位*/
        }
 </style>

（3）颜色属性

在这里插入图片描述

<style type="text/css">
        p{
            color: red;
        }
</style>
<body>
    <p>想来生活无非是痛苦和美丽</p>
</body>

在CSS中如何通过color属性来修改文字颜色：

通过英文单词赋值：color：red(红色)；但是 表示颜色有限制.
通过rgb（红、绿、蓝）赋值：color: rgb(100,200,30)，取值范围为0~255，三个值相同就是灰色，随着值越小越偏黑色。
通过rgba赋值：color: rgba(250,0,0,0.8)；a的值表示透明度，取值为0~1,值越小越透明。
通过16进制赋值：color: #00FFFF; 本质还是RGB，每两位十六进制表示一位颜色值。
通过16进制的缩写赋值： color: #0FF; 十六进制的值，每两位都一样，就可以简写。

3. CSS中的标签选择器

<head>
<title>CSS文本属性</title>
    <style type="text/css">
        p{
            /*更改属性以及属性值*/
        }
    </style>
</head>
<body>
    <p>想来生活无非是痛苦和美丽</p>
</body>

但是注意：会应用于当前界面该标签所有的，而不能单独指定某一个，例如p标签，则当前界面所有段落都会被更改。而且每个标签都可以作为一个标签选择器：hn、img…

4.id选择器

功能： 为了实现单独选择某个特定的标签单独改变样式

注意：使用id选择器选择特定标签时需要 #+id名，id名称命名规则与标识符相同，不能跟标签名相同。企业开发中，id不能随便用，只是为了设置样式不用id，id留给js用。

在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
   <style type="text/css">
    #ident1{ /*注意，使用id选择器时前面一定要加#*/
              color: red;
           }
   </style>
</head>

<body>
   <p id="ident1">Love is love</p>
   <p id="ident2">Man always love beause of romantic</p>
   <p id="ident3">想来生活无非是痛苦和美丽</p>
   <p id="ident4">落日和你</p>
</body>
</html>

5. 类选择器

注意：
1.每个标签都可以设置类名。
2.类名可以重复。
3.注意在设置样式是=时，要.（点）+类名{设置属性+属性值}。
4.一个标签可以由多个类名。
eg: <p class=“pp par2”>落日和你</p>表示该p标签有两个名字，pp和par2,中间由空格隔开。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>class类选择器</title>
    <style type="text/css">
        /*根据指定的类名找相应的标签，设置相应的属性*/
        /*类名前加.点！*/
       .pp{
            color: red;
        }
        .ppp{
            color: yellow;
        }
    </style>
</head>

<body>
    <h2>独自美丽</h2>
    <p class="pp">Love is love</p>
    <p class="ppp">Man always love beause of romantic</p>
    <p class="pp">想来生活无非是痛苦和美丽</p>
    <p class="pp par2">落日和你</p>
</body>
</html>

在这里插入图片描述

对比: 类选择器和id选择器的区别

id相当于人的身份证号，不可重复，仅有一个。class相当于人加入的社团可以重复而且可以有多个。
id选择器以#开头，class选择器以.开头。
一般id是给js用的，所以设置样式首先考虑class再考虑id。

拓展：
用class可以抽取出相同更改的样式，在企业开发中常用，可以减少代码量。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>class类选择器</title>
    <style type="text/css">
        /*根据指定的类名找相应的标签，设置相应的属性*/
        /*类名前加.点！*/
        .size30{
            font-size: 25px;
        }
        .colorR{
            color: red;
        }
        .line{
             text-decoration:underline;
        }
    </style>
</head>

<body>            <!--在企业开发中可以将公共代码抽取到类选择其中，将标签与类绑定即可-->
    <p class="colorR size30">想来生活无非是痛苦和美丽</p>
    <p class="size30 line">落日和你</p>
    <p class="colorR line">超喜欢你</p>
</body>
</html>

在这里插入图片描述

6.后代选择器:div为父代标签

格式：div、div标签中的（#+id名）、div标签中的（.+class名）+空格+子代标签(与div类似可用标签名，也可以用id或者class)

表示的含义是：去body标签内容中找到父代后去找对应子代标签更改样式，注意在如果只用标签名称不用id或者class名，那么这里一个空格表示往下一代

eg:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
    <style type="text/css">
        div p{    /*父代标签+空格+子代(儿子、孙子等等等，只要是子代就行)标签*/
            color: red;
            text-decoration: underline;
        }
        #div1 #para1{
            text-align: center;
        }
        #div1 .para3{
            font-size: 25px;
        }
        div ul li ul li p{
            color: blueviolet;
        }
    </style>
</head>

<body>
    <div id="div1" class="div2">    
        <p id="para1">想来生活无非是痛苦和美丽</p>
        <p class="para3">落日和你</p>
        <p>超喜欢你</p>
        <ul>
            <li>
                <ul>
                    <li>
                        <p>Man Alwags love 想来生活无非是痛苦 pain 和美丽 beautiful</p>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <hr>
    <h2>独自美丽</h2>
    <p>Love is love</p>
    <p>Man always love beause of romantic</p>
    <p>想来生活无非是痛苦和美丽</p>
    <p>落日和你</p>
</body>
</html>

在这里插入图片描述

7.子元素选择器只能选能父代的直接子代（即儿子）

注意：
1. >表示直接子代,一个>号表示向下一个直接子代，没有空格！！！没有空格！！！
2.

div>ul>li>p
{
color: blueviolet;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子元素选择器</title>
    <style type="text/css">
        div>p{   /*>表示直接子代*/
            color: red;
        }
        div>ul>li>p{   /*>表示直接子代,一个>号表示向下一个直接子代*/
            color: blueviolet;
        }
        #ident1>p{    /*也可以跟子代选择器一样用父代的id或者class名*/
            font-size: 25px;
        }
        .div1>p{
            text-align: center;
        }
    </style>
</head>

<body>
    <p>Love is love</p>
    <div id="ident1" class="div1">  <!--如何只让下面两个p变成红色的？即直接子代变色-->
        <p>Man always love beause of romantic</p>
        <p>想来生活无非是痛苦和美丽</p>
        <ul>
            <li>
                <p>独自美丽</p>
            </li>
        </ul>
    </div>
    <p>落日和你</p>
</body>
</html>

在这里插入图片描述

拓展：后代选择器与子元素选择器之间的区别，在企业开发中选哪个？
不同：
1.后代选择器会选中该父代所有具有该标签的所有子代（包括孙子…）,但是子元素选择器>只能选择直接子代
相同：
1.两个都可以使用相应的符号一直连续下去。
2.两种选择器都可以使用标签选择器、id选择器、class选择器来实现。

8. 设置背景颜色、背景图片

背景颜色就是属性background-color，它的设置与字体color值的设置一样。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景颜色和背景图片</title>
    <style type="text/css">
        body{
                             <!--本地或者是网络地址-->
             background-image: url("img1.jpeg"); 
             background-repeat: repeat-x;
        }
    </style>
</head>

<body>
    <div class="div1">
    </div>
</body>
</html>

在这里插入图片描述

1.background-repeat属性（平铺方式）

background repeat 属性，控制图片是如何平铺，有x方向平复，y方向平铺，以及no-repeat不平铺。

2.背景定位属性 background-position

取值：
（1）具体方位名词：水平方向：left、center、right, 垂直方向：top、center、bottom
（2）具体像素值：两个值，左边一个像素值表示图片距离左部像素距离，右边一个值表示图像距离顶部的像素距离。可以取负值！！！一定要加单位px

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景颜色和背景图片</title>
    <style type="text/css">
        body{
           background-color:pink;
        }
        div{
            height: 500px;
            width: 900px;
        }
        .div1{
            background-image: url("img1.jpeg");
            background-repeat: no-repeat;
            background-position: center center;
            background-position: 200px 0px;/*左边值表示水平距离左边的像素距离，右边的值表示距离顶端的像素距离*/
            background-position: -100px 0px; /*可以为负值*/
        }
    </style>
</head>

<body>
    <div class="div1">
    </div>
</body>
</html>

在这里插入图片描述