CSS入门学习

冯小勤 · 发表于 2021-2-22 18:33:00

转载：https://www.cnblogs.com/yuanchenqi/articles/5977825.html

一.CSS引入的四种方式

1.第一种：直接通过标签属性style写入：

<div style="color:red;background-color:beige">hello yuan</div>
说明：css其实就是键值对。

第二种：style标签写入head标签中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        p{
            color: rebeccapurple;
            font-size: 40px;
        }

        a{
            text-decoration: none;  //去掉下划线
        }
    </style>
</head>
<body>

<div style="color:red;background-color:beige">hello yuan</div>

<div>hello div</div>
<p>hello p</p>
<a href="">点我</a>
</body>
</html>

第三种：链接式
首先，新建css后缀的文件，即Stylesheet，文件名称为：test1.css;
然后，通过link标签引入css文件；
说明：需在head标签中进行引入，link标签（自闭合标签），且注意写rel，告诉它是什么文件类型；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="test1.css" rel="stylesheet">
</head>
<body>
<div>hello div</div>
<p>hello p</p>
<a href="">点我</a>
</body>
</html>

第四种：导入式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "test1.css";
    </style>
</head>
<body>
<div>hello div</div>
<p>hello p</p>
<a href="">点我</a>
</body>
</html>

链接式和导入式的区别：
1.链接式引入文件的数量是没有限制的，导入式是有限制的；
2.导入式对css代码和html代码进行了分隔；
3.导入式先加载HTML，再加载css，若css延迟，有可能出来没有css的html的丑陋界面；
链接式是先把css准备好，css没准备好，不会让html显示出来的，所以你只要能看到结果，一定是最完整的结果；
结论：推荐使用链接式

二：CSS的选择器（Selector）
1.基础选择器
*：通用选择器  //改变所有标签

*{
    
}

E：标签选择器 //element,通过标签名字

div{

}

id选择器：--使用井号 #

说明：id和井号#是亲兄弟，只要看到#，基本上就是指的id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #littleP{
            color:hotpink;
        }

    </style>
</head>
<body>
<div>hello div</div>
<p id="littleP">hello p</p>
<a href="">点我</a>
</body>
</html>

class 类选择器：---使用点 .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cc{
            color:hotpink;
        }

    </style>
</head>
<body>
<div>hello div</div>
<p id="littleP">hello p</p>
<a href="">点我</a>
<p class="cc">PPP</p>
<p class="cc">PP</p>
</body>
</html>

eg:混合基础选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.cc{  //混合基本基础选择器，注意：div和\.cc之间不要有空格
            color:hotpink;
        }

    </style>
</head>
<body>
<div>hello div</div>
<p id="littleP">hello p</p>
<a href="">点我</a>
<p class="cc">PPP</p>
<p class="cc">PP</p>
<div class="cc">lalala</div>
</body>
</html>


2.组合选择器

逗号--逗号相当于并列的意思
把两个标签用一句话表示出来，加逗号即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #littleP,div.cc{  //逗号相当于并列的意思
            color:hotpink;
        }

    </style>
</head>
<body>
<div>hello div</div>
<p id="littleP">hello p</p>
<a href="">点我</a>
<p class="cc">PPP</p>
<p class="cc">PP</p>
<div class="cc">lalala</div>
</body>
</html>

空格---后代选择器（看所有后代，需要涉及嵌套）
.div1 .div2 

大于号---子代选择器(只看儿子层)
.div1>.cc
.div div>p{
}

毗邻元素选择器（并列的时候会用，需要紧挨着才行）---说明：仅向下找，不向上找

.div1 + div

3.属性选择器

 E[att]         匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）   p[title] { color:#f00; }

 
 E[att=val]     匹配所有att属性等于“val”的E元素                                 div[class=”error”] { color:#f00; }

 
 E[att~=val]    匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素      td[class~=”name”] { color:#f00; }

 E[attr^=val]    匹配属性值以指定值开头的每个元素                     div[class^="test"]{background:#ffff00;}

 E[attr$=val]    匹配属性值以指定值结尾的每个元素                     div[class$="test"]{background:#ffff00;}

 E[attr*=val]    匹配属性值中包含指定值的每个元素                     div[class*="test"]{background:#ffff00;}

4.伪类--专用于控制链接的显示效果

a:link（没有接触过的链接）,用于定义了链接的常规状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。---悬浮用的最多

a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

伪类选择器 : 伪类指的是标签的不同状态:

           a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

补充：
after/before

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .add:after{  //在定位到的标签元素后加文档，并且对添加的部分做css操作
            content: "欢迎加入前端学习";
            color:hotpink;
        }

    </style>
</head>
<body>
<div class="add">hello</div>

</body>
</html>

显示效果：

三.CSS的常用属性

1.颜色属性

div style="color:blueviolet">ppppp</div> //颜色的英文单词

<div style="color:#ffee33">ppppp</div> //RGB颜色对照表（十六进制）

<div style="color:rgb(255,0,0)">ppppp</div> //red、green、blue三种颜色范围：0-255

<div style="color:rgba(255,0,0,0.5)">ppppp</div> //多出来的a表示透明度，数值越小越透明

2.字体属性

font-size: 20px/50%/larger //可通过三种方式设置：像素、百分比、还有smaller

font-family:'Lucida Bright' //字体，一般论文都是：Times New Roman

font-weight: lighter/bold/border/ //粗体

<h1 style="font-style: oblique">老男孩</h1> //斜体

来源：https://www.cnblogs.com/sf-express/p/14431957.html

CSS入门学习

浏览过的版块