CSC基本使用

最新推荐文章于 2022-08-17 23:05:20 发布

双面沸小虎

最新推荐文章于 2022-08-17 23:05:20 发布

阅读量545

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/JBVHG/article/details/124676296

版权

本文详细介绍了CSS（层叠样式表）的各种用法，包括行内样式、内部样式、外部样式的选择器应用，如标签选择器、类选择器、ID选择器等，并探讨了后代选择器、子选择器、相邻兄弟选择器等高级选择器的使用。此外，还讲解了伪类和伪对象选择器，以及属性选择器、通用选择器和鼠标光标样式。内容覆盖了CSS在网页样式控制中的核心概念和技术。

摘要由CSDN通过智能技术生成

CSC

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
			样式定义如何显示 HTML 元素
			样式通常存储在样式表中
			把样式添加到 HTML 中 
			外部样式表可以极大提高工作效率
			外部样式表通常存储在 CSS 文件中
			多个样式定义可层叠为一
			html 在一个网页中负责的事情是一个页面的结构
	   		css(层叠样式表) 在一个网页中主要负责了页面的数据样式。

1. 行内样式

行内样式，其实从它的名字就可以看出来它的特点，就是直接在 HTML 标签中使用 style 属性设置 CSS 样式。例如像下面这样的：

<p style="font-size: 18px;">行内样式</p>

2. 内部样式

就是在html的头部利用选择器使用 style 属性设置 CSS 样式。

<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>css行内样式</title>
    <style>
		/* 内部样式 */
		h3 {
			color: #0f0;
		}
	</style>
</head>

3. 外部样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QH8x7RQ3-1652104132492)(C:\Users\12299\AppData\Roaming\Typora\typora-user-images\image-20220509143413784.png)]

在外面建立一个csc文件里面利用选择器写好要设置的csc属性然后在文件头部通过link 文件路径进行连接：

  <link rel="stylesheet" href="./csc/03.csc">

4. 标签选择器

格式：标签 {设置属性}

标签选择器的作用：快速选择网页中的元素，如表格、图片等。

<style>
		/* 内部样式 */
		p {
			color: #5b9e4c;
            font-size: 66px;
		}
</style>
	
<p>李昊哲桃李不言</p>

5.类选择器

格式：.类名{设置属性}

<style>
        .buzhidao {
            font-size: 33px;
        }
</style>


<p class="buzhidao">李昊哲桃李不言</p>

6. ID选择器

格式：#id名{设置属性}

<style>
#lihaozhe {
            color: #be82d1;
        }
</style>


 <p class="buzhidao" id="lihaozhe">李昊哲下自成蹊</p>

7. 后代选择器

格式：父标签子标签{设置属性}

父标签下的所有子标签（包括子标签的子标签）都会被设置上属性

<style>
		ul a{
          text-decoration: line-through;  
        }
	</style>
	
	
	 <a href="">00</a>
    <ul>
        <a href="">11</a>
        <a href="">22</a>
        <li><span><a href="">33</a></span></li>
        <li><span><a href="">44</a></span></li>
    </ul>
    <a href="">55</a>

8. 子选择器

格式：父标签>子标签{设置属性}

父标签下的子标签只能选择一代子类会被设置上属性

   <style>
		ul>a {
            text-decoration: line-through;
        }
	</style>
	
	
	
	<body>
    <a href="">00</a>
    <ul>
        <a href="">11</a>
        <a href="">22</a>
        <li><span><a href="">33</a></span></li>
        <li><span><a href="">44</a></span></li>
    </ul>
    <a href="">55</a>
</body>

9. 直接相邻选择器

格式：#ID名+邻居标签{设置属性}

<!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>css行内样式</title>
    <style>
		 #two+p {
            color: #0df005;
            background-color: #5B5BEB;
            font-size: 66px;

        }
	</style>
</head>
<body>
    <span>
        <p>老大</p>
        <p id="two">老二</p>
        <p>老三</p> /*仅仅老三被设置了属性*/
        <p>老四</p>
        <p>老五</p>
    </span>
</body>
</html>

10. 间接相邻选择器

格式：#ID名~邻居标签{设置属性}

<style>
		 #two+p {
            color: #0df005;
            background-color: #5B5BEB;
            font-size: 66px;

        }
	</style>
</head>
<body>
    <span>
        <p>老大</p>
        <p id="two">老二</p>
        <p>老三</p> /*老三 老四 老五都被设置了属性*/
        <p>老四</p>
        <p>老五</p>
    </span>
</body>

11. 属性选择器

格式：[type=类型]{设置属性}

<style>
		 [type=text]{
            width: 300px;
            height: 100px;
            border-width: 30px;
            border-radius: 15%;
        }
	</style>
</head>
<body>
    
       /*text类型的input被设置上了属性*/
    <input type="text" name="" id="" value="" placeholder="请输入账号" />
    <input type="password" name="" id="" value="" placeholder="请输入密码" />
</body>

12. 公共选择器

公共说白了就是多个属性选择器同时设置属性

格式：[type=类型]，[type=类型]{设置属性}

<style>
		  [type=text],
        [type=password] {
            width: 300px;
            height: 50px;
        }
	</style>
</head>
<body>
    <input type="text" name="" id="" value="" placeholder="请输入账号" />
    <input type="password" name="" id="" value="" placeholder="请输入密码" />
</body>

13. 通配符选择器

该选择器可以与任何元素匹配，就像是一个通配符

格式：*{设置属性}

<style>
		 * {
            color: #FF007F;
            background-color: #DBDCDB;
            font-size: 66px;
        }
	</style>
</head>
<body>
    <ul>
        <li>
            <a href="">超链接</a>
        </li>
    </ul>
    <p>李昊</p>
    <span>李哲</span>

</body>

14. 伪类选择器

什么是伪类？

伪类用于定义元素的特殊状态。

text-decoration: line-through; 线穿过文字

text-decoration: underline; 下划线

a:link {color: #FF0000;} 未访问的链接的颜色

a:visited {color: #00FF00;} 已访问的链接的颜色

a:hover {color: #FF00FF;} 鼠标悬停链接的颜色

a:active {color: #0000FF; } 已选择的链接的颜色

img:hover { width: 600px; cursor: pointer; box-shadow: 30px 30px 30px 30px #FF0000; } 鼠标悬停图片的颜色与变化

鼠标悬浮样式cursor

这里我们要用cursor属性

cursor 属性规定要显示的光标的类型（形状）。

1、default 默认光标(通常是一个箭头)

2、auto 默认。浏览器设置的光标。

3、crosshair光标呈现为十字线。

4、pointer 光标呈现为指示链接的指针(-只手)

5、move 此光标指示某对象可被移动。

6、e-resize 此光标指示矩形框的边缘可被向右(东)移动。

7、ne-resize此光标指示矩形框的边缘可被向上及向右移动(北东)。

8、nw-resize此光标指示矩形框的边缘可被向上及向左移动(北西)。

9、n-resize 此光标指示矩形框的边缘可被向上(北)移动。

10、se-resize此光标指示矩形框的边缘可被向下及向右移动(南东)。

11、sw-resize此光标指示矩形框的边缘可被向下及向左移动(南西)。

12、s-resize 此光标指示矩形框的边缘可被向下移动(北西)。

13、w-resize 此光标指示矩形框的边缘可被向左移动(西)。

14、text 此光标指示文本。

15、wait 此光标指示程序正忙(通常是一只表或沙漏)。

16、help 此光标指示可用的帮助(通常是一个问号或-个气球)。

15.伪对象选择器

伪对象也叫伪元素，在过去，伪类和伪元素都被书写成前面只加一个冒号，实际上伪对象应该用两个冒号来定义。

伪类和伪对象（元素）的区别

伪类一般反映无法在CSS 中轻松或者可靠检测到的某个元素的状态或者属性；

伪元素表示DOM 外部的某种文档结构

常用伪元素

1.E:before/E::before

2.E:after/E::after

伪元素是在元素内容的前面或后面定义的，必须要添加content:""这个属性，不然伪元素无法定义成功。

p::after{ content:“在P 标签元素内容前加了内容”; color: red;}

input:checked+span::after{
            background-color: #FF0000;
            content: '我结婚了';
        }

双面沸小虎

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫