前端基础——CSS 选择器、网页美化-优快云博客

本文链接：https://blog.youkuaiyun.com/wjr0258/article/details/107019977

什么是CSS

Cascading Style Sheet 层叠级联样式表
CSS:表现和美化网页
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
发展史：
CSS1.0
CSS2.0： DIV（块）+CSS , HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1: 浮动，定位
CSS3.0：圆角，阴影，动画……浏览器兼容性

快速入门及CSS的优势

入门

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--规范：<style>可以编写css代码   每个声明最好用分号结尾
语法：
选择器{
声明1；
声明2；
……
}；
-->
    <style>
        h1{
            color: blueviolet;
        }
       
    </style>
</head>

html与css分离：

h1{
    color: blueviolet;
}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <link rel="stylesheet" href="css/style.css">   <!--这里用link定位-->
</head>

优势

1.内容和表现分离
2.网页结构表现统一，可以实现复用
3.样式十分丰富
4.建议使用独立于html的css
5.利用SEO，容易被搜索引擎收录

四种CSS导入方式（3种常用）

优先级：就近原则（最近的一定是行内样式，内部和外部样式看排列方式）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--内部样式-->
    <style>
        h1{
            color: blue;
        }
    </style>
<!-- 外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
          <h1 style="color: brown">我是标题</h1>
</body>

/*外部样式*/
h1{
    color: yellow;
}

拓展：外部样式的两种写法
- 链接式（link）常用
- 导入式：
  - 弊端：网页元素太多时会先展示框架再渲染
  - 是CSS2.1特有的

 <style>   
        @import url("css/style.css");
    </style>

选择器——重要！

作用：选择页面上的某一个或一类元素

三种基本选择器

1.标签选择器：选择一类标签
2.类选择器：选中所有 class属性一样的标签，可以跨标签

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 类选择器的格式  .class的名称{}
        好处：可以多个标签归类，是同一个class
        */
        .qinjiang{
            color: #67c23a;
        }
        .kuangshen{
            color: mediumblue;
        }
    </style>
</head>
<body>

<h1 class="qinjiang">标题1</h1>
<h1 class="kuangshen">标题2</h1>
<h1>标题3</h1>
<p class="qinjiang">我不是标题</p>
</body>

3.id选择器：全局唯一！！不要重复

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id选择器:id必须保证全局唯一！！！不建议重复使用
        #id名称{}
        */
        #qinjiang{
            color: brown;
        }

        .style1{
            color: blue;
        }

        h1{
            color: #57a527;
        }

    </style>

</head>
<body>
<h1 id="qinjiang" class="style1">标题1</h1>
<h1 >标题2</h1>
<h1 class="style1">标题3</h1>
<h1 class="style1">标题4</h1>

</body>

不遵循就近原则，有固定顺序
- id选择器>class选择器>标签选择器

层次选择器（四种）

html部分：

<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>

1.后代选择器：在某个元素的后面的所有代

 /*    后代选择器     body后面所有p标签 p1--p6*/
        body p{
            background: yellow;
        }

2.子选择器：只有儿子这一代

 /*    子选择器     body后面那一代里所有p标签 即只有p1,p2,p3*/
        body>p{
            background:green;
        }

3.相邻（下）兄弟选择器：对下一个同辈（只有一个！！）

 /*    相邻（下）兄弟选择器 即p2 */
        .active+p{
            background: black;
        }

4.通用兄弟选择器：向下的所有同辈，即p2,p3

 /*    通用兄弟选择器*/
        .active~p{
            background: blueviolet;
        }

结构伪类选择器

HTML代码同上
选择器代码：

/* ul的第一个 子元素  */
ul li:first-child{
    background: #67c23a;
}

/* ul的最后一个 子元素 */
ul li:last-child{
           background: yellow;
        }
    /*选中p1:定位到当前元素的父元素，
    选择这个父级元素的第一个子元素（第一个子元素必须是与当前元素同类（p）的才生效）
    不能顺延
    */
p:nth-child(1){
    background: blue;
}
        /*选中其父元素下的第2个p元素！！只要存在第2个p元素就能生效*/
        p:nth-of-type(2){
            background: brown;
        }

属性选择器（常用）

通过属性甚至属性的值来选择元素

/*1[2]{}      存在2属性的1类型的元素*/
    a[id]{
    }
    /*1[2=3]{}     存在2属性的值等于3的1类型的元素
    *=表包含3
    ^=表示以3开头，
    $=表示以3结尾*/
    a[id="123"]{
    }

美化网页元素

注意：要重点突出的内容，用span包起来

字体样式：

文字的字体、文字大小、颜色等属性

body{
            /*字体 可以设置两种用逗号隔开，中英文分别应用两种*/
            font-family: 楷体;
            /*字体大小*/
            font-size: 50px;
            /*字体粗细*/
            font-weight: bold;
        }
        /*也可一行设置多个属性：*/
        p{
            font: oblique bold 16px 楷体;
        }

文本样式

背景颜色、对其方式、首行缩进、行距和装饰等

/*文字与图片居中对齐*/
	a,b{
		vertical-align: middle
	}
	body{
		/*颜色color 可以#xxxxxx表示rgb颜色，或者直接颜色命
		或者使用rgb()rgba()函数，后者多一个透明度参数*/
		color: rgb(0, 0, 0);
		/*排版：居中等*/
		text-align: center;
		/*首行缩进 em为一个字母位置*/
		text-indent: 2em;
		/*行高和块高，如果一样可以有上下居中的效果*/
		height: 100px;
		line-height: 100px;
		/*上、下、中划线 设置划线颜色大多浏览器不支持
		同时只能有一个划线，应该遵循覆盖的就近原则*/
		text-decoration-color: #d60005;
		text-decoration: underline;
		text-decoration: overline;
		text-decoration: line-through;
		/*超链接去除下划线*/
		text-decoration: none;
		/*阴影 参数：阴影颜色，水平垂直偏移，模糊半径*/
		text-shadow: black 5px 5px 1px
	}

超链接伪类

让超链接在被选中或者点击等状态时，有不同的形态

	/*正常显示*/
    a{}
    /*鼠标悬浮的状态*/
    a:hover{}
    /*鼠标悬浮未释放的状态*/
    a:active{}
    /*已访问的链接（点过链接紫色的样子）*/
    a:visited{}