css基础（1）_css 外围样本样式应用于特定元素-CSDN博客

本文链接：https://blog.csdn.net/Jy123_/article/details/105785082

css(外观)

css初识

css（Cascading Style Sheets）通常称层叠样式表或css样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图形的外形（宽高、边框样式。边距等）以及版面的布局等外观显示样式。

css的样式规则

h1 { color : red; font-size:16px;} 选择器 {属性：属性值；}
1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
可以用段落和表格的对齐的演示。

css的使用

在标签里面例如<a href="#" style="color:red;"> 行内样式
在head里面<head><style> a{color:red;} </style></head> 内部样式表
新建一个css文件外部引入需要在<head> <link rel="stylesheet" href="index.css"></head>引入外部样式表
他们的优先级是3<2<1<!important

css字体样式表

font-size：字号大小
字体单位
font-family：字体
p{ font-family:“微软雅黑”;}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
注意：

现在网页中普遍使用14px+。
尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
font-weight:字体粗细
字体加粗除了b和strong标签之外，可以用css来实现，但是css是没有语义的。
font-weight的属性值有normal，bold,bolder,lighter,100-900(100的整数倍)。
font-style：字体风格
字体倾斜除了用i和em 标签之外可以用font-style来实现。
属性值normal(正常)，italic（斜体），oblique（倾斜）
可以用font设置全部属性
font：font-style font-weight font-size/line-height font-family
使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

开发者工具（Chrome）

以后代码出问题，第一件事就是打开开发者工具
按F12 或者是ctrl+shift+i 或者点击空白处选择检查

选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

标签选择器规则标签名{属性：属性值；}或者元素名{属性：属性值；}
类选择器规则 .类名{属性：属性值；} 要在元素标签上面加class属性例如<a class="类名"></a>
注意：1.class可以有多个<a class="类名1 类名2"></a>2.不建议使用_下划线命名3.不要以纯数字、中文等命名
id选择器规则 #类名{属性：属性值；} 例如<a id="类名"></a> id只有一个
通配符选择器规则 *{属性：属性值；} 用 * 标签是作用范围最广的一般

*{
margin:0; /*清除外边距*/
padding:0;/*清除内边距*/
}

伪类选择器

链接伪类选择器
a :link 未访问的链接
a :visited 已访问的链接
a :hover 鼠标移动到的链接
a :active 选定的链接
记忆 love hate

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>链接伪类选择器</title>
    <style>
        /* 未点击访问的链接 */
        a:link {
            color: red;
        }

        /*点击访问后的链接 */
        a:visited {
            color: blue;
        }

        /* 鼠标移动到链接 */
        a:hover {
            color: yellow;
        }

        /* 选定的链接 */
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="http://www.baidu.com">点击</a>
    <a href="#">点击我</a>
</body>

</html>

结构伪类选择器（css3）
:first-child:选取属于其父元素的首个子元素的指定选择器
:last-child:选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n):匹配属于其父元素的第N个子元素，不论元素类型
: nth-last-child(n):选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>位置伪类</title>
    <style>
        /* 第一个li */
        li:first-child {
            color: cadetblue;
        }

        /* 最后一个li */
        li:last-child {
            color: chartreuse;
        }

        /* 第二个li */
        li:nth-child(2) {
            color: crimson;
        }

        /* 倒数第二个li */
        li:nth-last-child(2) {
            color: darkgoldenrod;
        }
    </style>
</head>

<body>
    <ul>
        <li>aa
            <ul>
                <li>星期一</li>
                <li>星期一</li>
            </ul>
            <span>星期一</span>
            <span>星期一</span>
        </li>
        <li>
            <span>星期二</span>
        </li>
        <li>
            <span>星期三</span>
        </li>
        <li>
            <span>星期四</span>
            <span>星期四</span>
            <span>星期四</span>
            <span>星期四</span>
        </li>
    </ul>
</body>

</html>

位置伪类的效果
3.目标伪类
:target目标伪类选择器，选择器可用于选取当前活动的目标元素
:target{
font-size:18px;
color:red;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>目标伪类选择器</title>
    <style>
        #img1:target {
            color: darkgoldenrod;
            font-size: 20px;
        }

        #img2:target {
            color: green;
            font-size: 14px;
        }

        #img3:target {
            color: pink;
            font-size: 35px;
        }
    </style>
</head>

<body>
    <div id="img1">
        <div id="img2">
            <div id="img3">
                <ul class="mainImg">
                    <li>星期一</li>
                    <li>星期二</li>
                    <li>星期三</li>
                </ul>
            </div>
        </div>
    </div>
    <ul class="controller">
        <li><a href="#img1">1</a></li>
        <li><a href="#img2">2</a></li>
        <li><a href="#img3">3</a></li>
    </ul>
</body>

</html>

在这里插入图片描述

根据锚点做的点击换图片

<!DOCTYPE html>
<html ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200427133752978.png)
lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锚点</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
            overflow: hidden;
            height: 150px;
            width: 350px;
        }

        li img {
            width: 350px;
            float: left;
            height: 150px;
        }

        li a {
            text-decoration: none;
            color: #ccc;
            float: left;
            font-size: 18px;
            margin-right: 25px;
        }
    </style>
</head>

<body>
    <ul>
        <li><img src="timg (1).jpg" id="a1"></li>
        <li><img src="timg (2).jpg" id="a2"></li>
        <li><img src="timg (3).jpg" id="a3"></li>
        <li><img src="timg (4).jpg" id="a4"></li>
        <li><img src="timg (5).jpg" id="a5"></li>
        <li><img src="timg (6).jpg" id="a6"></li>
        <li><img src="timg (7).jpg" id="a7"></li>
    </ul>
    <ul>
        <li><a href="#a1">1</a></li>
        <li><a href="#a2">2</a></li>
        <li><a href="#a3">3</a></li>
        <li><a href="#a4">4</a></li>
        <li><a href="#a5">5</a></li>
        <li><a href="#a6">6</a></li>
        <li><a href="#a7">7</a></li>
    </ul>
</body>

</html>

在这里插入图片描述