CSS学习第二周

最新推荐文章于 2024-05-21 21:13:29 发布

Zhangzanhao

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量572

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/Zhangzanhao/article/details/122753609

版权

嗨兄弟们，经过了一周的学习我这次学到了挺多东西的

一起来看看吧！！

三大样式表

分别是内部样式表，外部样式表，行内样式表

一，内部样式表简单来说就是写在HTML文件并用<style>标签囊括在里面的，就叫内部样式表，内部可以理解成HTML的内部

二，外部样式表就是新建一个CSS文件，与HTML区别开，且会在HTML文件里说明引用的CSS文件

譬如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内部 行内 外部样式表</title>
		<link rel="stylesheet" href="style.css">  
		
	</head>
	<body>
		<h1 style="color: aquamarine; font-size: 16px;">行内样式表 样式少的时候用</h1>
	</body>
</html>

其中href就是引用的途径

三，行内样式表就是在标签中用属性style写CSS

这种情况适用于你CSS的代码较少的时候

这三大样式表还是比较好理解的

块元素和行内元素，行内块元素

一，块元素就是一个标签就占一大块的，像<div><p><h1><h6>等标签占一整行

二，行内元素就是可以和相邻行内元素可在同一行，不独占一行

块元素和行内元素的区别除了面积之外：

①还有行内元素不可调宽高而块元素可以

②行内元素不可包括块元素而块元素可以（但是<h1><p>等文字类块元素不可放其他块元素）

③块元素不可与块元素同行而行内元素可以

三，在块元素和行内元素之间还存在一个行内块元素<input><img><td>，其特点有：

①可以和行内元素同行

②可以调范围宽高

而行内元素和块元素可以转化为行内块元素，方法是：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>块 行内 行内块元素</title>
	</head>
    <style>
    h1 {
        display:inline-block;
    }
    </style>
	<body>
		<h1>块转行内块</h1>
	</body>
</html>

显示模式display下行内转块block 块转行内inline（在线上）转行内块inlink-block

复合选择器

复合选择器我们会讲很多

包括交集并集后代子元素属性伪元素共6种选择器，但不难理解

交集选择器

其实很简单理解。

我们之前说过有标签选择器，id选择器，类选择器等，所以一个标签可以有标签名，类名，id名。

因此在我们不好选中某个标签时，可以写上其标签名，类名，交叉选中此标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>交集选择器</title>
        <style>
        p.class {
            color:blue;
        }
        </style>
	</head>
	<body>
        <p class=class>交叉</p>
	</body>
</html>

方法就是将标签名和类名或id名结合。

并集选择器

要是想多选几个标签的话可以使用并集选择器

方法就是将每个标签名或类名id名用逗号隔开且多一个空格，即可完成连选。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>并集选择器</title>
        <style>
        h1, em, span#2 {
            font-family:"微软雅黑";
        }
        </style>
	</head>
	<body>
        <h1 class=1>并</h1>
        <em>集</em>
        <span id=2>选择器</span>
	</body>
</html>

后代选择器

后代选择器适用于有父子级划分的标签

当想选中父级之外的其中一个子级的话就要用后代选择器

只要写出父级标签名再空个格再写子级标签名即可被选中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            div div#class {
                color:red;
            }
        </style>
	</head>
	<body>
        <div>
            <div id=class>后</div>
            <div>代</div>
        </div>
	</body>
</html>

子元素选择器

子元素选择器和后代选择器有亿点点区别：

倘若子级后面还有子级后代选择器就会选中子级后的所有子级

而子元素选择器只会选择当前的子级，不会再选中往下的子级

方法是父级名 > 子级名即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            div > div#class {
                color:red;
            }
        </style>
	</head>
	<body>
        <div>
            <div id=class></div>
        </div>
	</body>
</html>

属性选择器

就是根据你标签里是否写有该属性来选对标签

内容可以看下面的代码，建议大家都动手试一试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
        <style>
           a[title] {
			color: azure;
		}
		input[type=text] {
			color: #0000FF;
		}
		div[class^=font] {    /* 尖括号表示以什么开头就可以了 */
			color: #7FFFD4;
		}
		div[class$=value] {    /* $表示以什么结束就可以被选中 class中不一定需要a-value 也 
                                   可以avalue */
			color: red;
		}
		/* *表示任意位置只要class有指定的字母都可以被选中 */
        </style>
	</head>
	<body>
        <input type="text" value=第一>
		<input type="text" value=第二>
		<input type="password" value=21212>
		
		<div class="font1">1</div>
		<div class="font2">2</div>
		<div class="gont3">3</div>
		<div class="font4">4</div>
		<div class="hont5">5</div>
		
		<div class="a-value">a</div>
		<div class="b-value">b</div>
		<div class="a-name">c</div>
		
	</body>
</html>

伪元素选择器

它跟伪类选择器的名差不多，但这个更细，细到可以针对标签中文字部分里的其中一个字，所以说为什么叫伪元素，也是有道理的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
           /* 伪元素选择器  可以选择里面的任意元素*/
		p::first-letter {     /* 选中段落的第一个字 */
			font-family: "agency fb";
		}
		p::first-line {
			color: #0000FF;
		}
		p::selection {        /* 用户在网页上选中的字变红色 */
			color: #FF0000;
		}
		div::before {       /* before和after都是在div里面的前面或后面插入字 */
			content: 俺;
		}
        </style>
	</head>
	<body>
       <p>哔哩哔哩动画</p>
		<div>今年</div>
		
	</body>
</html>

背景图片

下面讲的就是关于背景图片的内容。

背景颜色

首先呢我们可以先用块元素设置宽高创建区域，然后我们可以为这区域设置背景颜色。

具体如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
           div {
                height:200px
                font-align:center
                background-color:pink;
                font-size:22px;}
        </style>
	</head>
	<body>
        <div>2022年新年快乐！</div>
	</body>
</html>

其中还有背景颜色的透明度这小知识

可以直接写成像文字透明度那样

background: rgba(250,0,0,0.5);

图片的引用

怎么引用图片呢？要用到background-imgae

其中url括号里要写明图片的路径

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
           background-image: url(img/3.jpg);  /* 图片路径要在此文件的父文件之下 */
        </style>
	</head>
	<body>
       <div></div>
	</body>
</html>

图片的平铺

什么叫平铺呢？

就是你设置的背景大小要是比图片大的话，本应该没被图片覆盖的地方就会被图片覆盖

具体怎么样的可以自己试一试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            div {
               background-repeat: no-repeat;   	 /*repeat表示平铺的意思，有repeat-x,repeat-y */ 
            }
        </style>
	</head>
	<body>
       <div></div>
	</body>
</html>

repeat就是平铺的意思，可以选择repeat-x意思就是在水平方向上平铺，repeat-y就垂直方向

图片固定

什么叫图片的固定呢，就是说在你观看一个网站要下滑时，图片是不会根据你的下滑而动，固定死的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            div {
               background-attachment: fixed;    	 /* scroll是会滚动 fixed是锁定 */
            }
        </style>
	</head>
	<body>
       <div></div>
	</body>
</html>

图片的方位

当你想把图片放在背景的具体位置时，就要用到图片的方位代码

设置位置有两类，一类是方位词，一类就是具体的坐标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
           div {
                background-postion:right bottom}
        </style>
	</head>
	<body>
        <div></div>
	</body>
</html>

用postion时有俩个位置，这俩个位置可以都填方位词，或都填坐标，也可以一方位词一坐标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
           div {
                background-postion:30px centre}
        </style>
	</head>
	<body>
        <div></div>
	</body>
</html>

要是一个一个地这么设置会不会很麻烦呀？

所以就又又又会有简写模式

综合模式

要是想把背景颜色，背景图片设定，背景图片平铺，固定，方位都一次性设置完的话

就要用到 background啦

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            div {
            background: #000000 url(img/QQQ.jpg) no-repeat fixed 40px 20px;    /* 图片定义的简写，按上面的顺序来 */
            }
        </style>
	</head>
	<body>
       <div></div>
	</body>
</html>

其顺序就是按照我们上面说的顺序依次写就完啦

图片的缩放

图片缩放也不是很复杂，小知识点而已

既然文字都有font-size，那图片肯定也会有background-size啦

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            div {
            background-size: 100px;    /*  图片的缩放 只写横坐标表等比例缩放
 写俩个数就是直接放，会失真  也可写百分比*/
            } 
        </style>
	</head>
	<body>
        <div></div>
	</body>
</html>

图片的填充

图片的填充有分两种依然是用background-size

cover代表是图片会等比例放缩直到填充完整个背景区域，所以有时图片会溢出，溢出的部分就会被舍去

contain代表是图片会等比例缩放，且图片会完整的填充到背景区域里，但不会填充完，会有背景颜色显现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            div {
            background-size: contain;
            } 
        </style>
	</head>
	<body>
       <div></div>
	</body>
</html>

多背景图片

多背景顾名思义就是在其中一个背景中填充好几张背景图片

格式大概就是综合模式那样

但要把背景颜色放在最后，且图片定义之间用逗号隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
           background:url(img/1.jpg) no-repeat top center,url(img/2.jpg) no-repeat scroll right bottom red;
        </style>
	</head>
	<body>
        <div></div>
	</body>
</html>

好！今天就讲到这，可能内容有点多哈

祝读者们新年快乐呀！！

Zhangzanhao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习第二周

内部样式表，外部样式表，行内样式表内部样式表简单来说就是写在HTML文件并用<style>标签囊括在里面的，就叫内部样式表，内部可以理解成HTML的内部外部样式表就是新建一个CSS文件，与HTML区别开，且会在HTML文件里说明引用的CSS文件譬如：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>内部行内外部样式表</title
复制链接

扫一扫