网页设计之css入门一_网页设计四种样式内部样式-CSDN博客

本文链接：https://blog.csdn.net/ljs298443/article/details/117532075

css位置：

一、内联样式：

<P style="color:blueviolet; font-size: 25px;">今日心情好</P>

效果：

开发中基本不使用

二、内部样式：

P:选择器

{}样式内容

语法：样式名:样式值

<!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>Document</title>
    <style>
        p{
            color: crimson;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <P>今日心情好</P>
</body>
</html>

三、外部样式：

适用于多个网页共享样式，在网页中引入外部样式，适用于link标签。

<link rel="stylesheet" href="家电.css">

放在html里面

 p{
     color: #f60;
     font-size: 57px;
 }

放在css里面

完整代码：

index.html:

<!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>Document</title>
    <link rel="stylesheet" href="家电.css">
</head>
<body>
    <P>今日心情好</P>
</body>
</html>

家电.css:

 p{
     color: #f60;
     font-size: 57px;
 }

css选择器：

1.元素(标签)选择器

通过元素名选择

2.id选择器

id选择器在元素中是唯一命名的

#+id即

#hello{
     background-color: cyan;
     font-size: 12px;
 }

3.类/class选择器(可以重复命名)

.+类名选中

html中的代码：

<p class="one app">说的很对很好的很好</p>
<p class="two">蛋糕给过过</p>
<p class="one">度的通天塔</p>
<p class="gg">房峰辉大风刮过过过</p>

css中的代码：

p{
     color: violet;
     font-size: 57px;
 }

 #hello{
     background-color: cyan;
     font-size: 12px;
 }

 .one{
     background-color: darkgoldenrod;

 }

 .app{
     font-size: 36px;
 }

一个元素可以使用多个类名，用空格隔开

4.伪类选择器：

点击时效果，鼠标移入时效果

选择器：伪类名

first-child：同类元素中的第一个

last-child：同类元素中的最后一个

<uL>
        <li>第一</li>
        <li>第二</li>
        <li>底单</li>
        <li>四</li>
        <li>无</li>
</uL>

li:first-child{
     color: #0f7cbf
 }

效果：

5.超链接的伪类：

<a href="https://www.baidu.com/">百度</a>
<a href="https://www.baiduddddd.com/">百度</a>

a:link{
     color: #f60;
 }

 a:visited{
     color: chartreuse;
 }

6.鼠标移入时的效果

.one:hover{
     background-color: black;
 }

移入前的效果：

移入时的效果：