4. CSS

最新推荐文章于 2024-05-31 14:59:34 发布

ANONYMOUS%

最新推荐文章于 2024-05-31 14:59:34 发布

阅读量97

点赞数

分类专栏： Step2 文章标签： css tensorflow 前端

本文链接：https://blog.csdn.net/weixin_55439500/article/details/132779424

版权

Step2 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. CSS的概念

层叠样式表(英文全称：Cascading Style Sheets)

是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

样式定义如何显示 HTML 元素
样式通常存储在样式表中
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

2. CSS的优势

将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率

3. 样式分类

根据CSS位置的不同，分为行内样式、内部样式和外部样式

3.1 行内样式

也称为内联样式

<!--直接在标签中写样式，通过使用标签内部的style属性；-->
语法:
<html标签 style="样式1:值1;样式N:值N;">你好</html标签>

案例演示
<div style="color: red;">hello my css</div>

弊端：只能对当前的标签生效，没有做到内容和样式相分离，耦合度太高。

3.2 内部样式

<!--定义在head内，通过style标签使用-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内部样式</title>
		<style>
			div{color: green;} -->元素标签，将所有的div标签内容颜色设为green
		</style>
	</head>
	<body>
		<div>hello my css</div>  -->被影响到内容
	</body>
</html>

3.3 外部样式

1. 先创建Style.css文件，并写入以下内容。作用同上面的内部标签
div {color: red;}	

2.在需要的HTML文件中导入引用: <link rel="stylesheet" href="Style.css" />
<!--代码如下：-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="css/Style.css" />
	</head>
	<body>
		<div>hello my css</div>
	</body>
</html>

作用域
- 外部样式 > 内部样式 > 行内样式
优先级：
- 行内样式 > 内部样式 > 外部样式
注意：当多个选择器作用在同一个标签上时，如果属性冲突，看优先级；如果不冲突，样式叠加生效。

4. CSS结构

4.1 基本格式

选择器 {
		属性1:值1;
		属性2:值2;
}

4.2 CSS注释

<style>
	div {
		color: red;  /*文字颜色是红色*/
	}
</style>

4.3 选择器

筛选具有相似特征的元素

id选择器

选择具有相同id的元素，建议html中id值唯一
id属性不要以数字开头

<!--id选择器中通过 id=“value” 的方式设置id-->
<!--style中用  #value{}  的方式选取。-->
虽然多个元素可以使用同一个id选择器控制样式，但是不推荐。如果需要同样的样式对多个标签生效，使用class选择器。

案例展示：
<head>
   <style>
      #myDiv{color:red;}
   </style>
</head>
<body>
<div id="mydiv">测试文字1111</div> 内容变为红色。
</body>

class选择器

选择具有相同的class属性值的元素。
可以在多个元素中使用。即：可以定义多个相同class的元素
类名的第一个字符不能使用数字！

<!--类选择器中通过 class=“value” 的方式设置类-->
<!--style中用  .value{}  的方式选取。-->

案例展示：
<head>
	<style>
   	.pink{color:pink;}
	</style>
</head>
<body>
   <div class="pink">
      测试类选择器
   </div>
</body>

元素选择器

又叫标签选择器
标签名必须是html提供的标签。即：p div a ul li table form … 等等
使用标签选择器：自动使用在所有的同名的标签上

<!--标签选择器中的标签必须是已提供的标签-->
<!--style中用  标签名{}  的方式选取-->

案例
<head>
	<style>
   	div{color:red;}
	</style>
</head>
<body>
   <div>测试类选择器</div>
</body>

选择器的优先级

ID选择器 > 类选择器  > 元素选择器

注意：当多个选择器作用在同一个标签上时，如果属性冲突，看优先级；如果不冲突，样式叠加生效。

5. 常用样式

5.1 字体颜色

三种方式

颜色的单词 red blue green black…
rgb值： RGB(255,0,0) 红绿蓝，
#值： #FF00AC

5.2 元素宽与高

注意：PS：只有块状元素可以设置宽高，行级元素设置不生效。
两种方式

数值 width: 500px; height: 200px;
百分比：占据父元素的比例width : 80%

5.3 背景样式

<style>
.bg {
     height: 300px;  图片高度
     background: cornflowerblue; 背景颜色
     background-image: url("../img/preview.jpg"); 以图片作为背景
     background-repeat: no-repeat;  背景是否重复铺开，这里为否  repeat-x:横轴铺开...
     background-position: 30px, 20px; 图片的位置
     background-attachment: fixed  图片固定不动
}
</style>
<body>
   <div class="bg">
   </div>
</body>

5.4 文本样式

div{
	/* 所有的块元素都有宽和高，行元素没有宽高*/
   width: 500px;
   height: 400px;
   
	font-size: 18px;  字体大小
   font-family: "微软雅黑";  字体类型
   font-weight: bold;  粗细程度
   text-align: center;  文本水平居中
   text-decoration: underline;  文本下划线
   line-height: 400px;   本行的高度，文字占全部高
   letter-spacing: 10px; 文字与文字之间的间距。
}

5.5 列表样式

li{
	background-color: red;
	list-style-type: decimal; /*none-无样式 square-正方形 circle-空心圆 decimal-数字*/
   list-style-image: url(img/a.png); 以壁纸作为列表类型
   list-style-position: outside;
   list-style: none;
}

5.6 边框样式

.border{
   border-width: 2px;
   border-color:red;
   border-style: dashed;  /*solid-实线 dashed-虚线*/
   border: none;   /*没有边框*/
   border: solid 1px red;   /*上边的结合*/
}

6. 盒子模型

6.1 css调试器

快捷键F12调出以下内容

在elements中可以看到当前页面的所有标签，在styles中可以看到html元素对应的样式。

6.2 盒子概念

所有HTML元素可以看作是一个盒子
CSS模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
- Margin(外边距) 清除边框外的区域，外边距是透明的。
- Border(边框) 围绕在内边距和内容外的边框。
- Padding(内边距) 清除内容周围的区域，内边距是透明的。
- Content(内容) 盒子的内容

案例展示：
<style>
   .div{
      border:solid red 10px;
      margin:50px;
      margin:50px 100px;  --> 上下  左右
      margin:50px 100px 150px; -->上  左右  下
      margin:50px 100px 150px 200px; -->上 右 下 左
      padding:50px;
   }
/*同理内边距(padding)也有这些操作*/
</style>

6.3 盒子的宽高

元素的实际宽度和高度

一个元素实际的宽度计算公式为：总元素宽度=宽度+左右填充 + 左右边框 + 左右边距。
一个元素实际的高度计算公式为：总元素高度= 高度+顶部和底部填充 + 上下边框 + 上下边距

6.4 box-Sizing

如果想要设置的宽度直接就是元素的实际宽度，通过box-sizing属性

box-Sizing值有两种：
	- content-box; 它的宽和高设置的是内容
	- border-box;  宽和高设置的是 内容 + border + padding

案例展示：
/*content-box的width和height从content算起，不包含border和padding*/
<style>
        .chrome {
            width: 100px;
            height: 100px;
            background-color: green;
            border: 5px solid black;
            padding: 5px;
            box-sizing: content-box;
            /*box-sizing:border-box;*/
        }
 /*border-box的width和height从border算起,包含border和padding*/
        .ie {
            border: 5px solid black;
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 5px;
            position: relative;
            bottom: 110px;
            left: 10px;
        }
    </style>
</head>
<body>
	<div class="chrome"></div>
	<div class="ie"></div>
</body>

7. float浮动

7.1 什么是浮动

CSS 的浮动会使元素向左或向右移动，并使周围的元素重新排列。
浮动往往是用于图像，但它在布局时一样非常有用。
当浮动的元素向左或向右移动直到外边碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。
关于彼此相邻的元素
- 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

7.2 清除浮动clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

<!--		没有浮动属性的元素都属于常规文档流：从上往下从左往右依次显示
			浮动的元素脱离了常规文档流；
			大家可以认为浮动元素属于一层，非浮动元素属于一层
			如果想要非浮动元素不受浮动元素的影响，需要使用clear属性 -->
<style>
	div{
		width: 400px;
		height: 200px;
		margin-bottom: 10px;}
</style>
</head>
<body>
<div style=" float: left;">
	div1-左浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动
</div>
<div style="width: 600px; height: 350px; ">
	div2-未浮动，常规文档流,
	<br/>此时div1在div2的上方显示，因为div1和div2是不同文档流中的元素，显示互不影响
	如果不想让div2被浮动元素影响，需要添加clear属性。
	添加clear: left;之后div2就会忽略div1浮动的影响，在div1层后面显示，不会重叠了，
</div>
<div style="background: lightblue; float: right; width: 1800px;">
	div3-右浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动
</div>
<div style="background: lightcoral; width: 600px; height: 350px; ">
	div4-未浮动，常规文档流,
	<br/>PS:此时div3在div4的上方显示，因为div3和div4是不同文档流中的元素，显示互不影响
	如果不想让div4被浮动元素影响，需要添加clear属性。
	添加clear: right;之后div4就会忽略div3浮动的影响，在div3层后面显示，不会重叠了，
	clear属性有三个取值：left、right、both;分别是取出左浮动、有浮动和所有浮动元素的影响
</div>
<div style="background: lavender;">
	div5-未浮动，常规文档流,
</div>
</body>

7.3 overflow

控制内容溢出元素框时显示的方式。

overflow值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪。只显示一部分
scroll	内容会被修剪，可通过滚动条查看其他内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

**注意:**overflow 属性只工作于指定高度的块元素上。

8. Display,Visibility

8.1 区别

隐藏元素可以设置：display：“none” 或 visibility：“hidden”
visibility:hidden 可以隐藏某个元素，但隐藏的元素仍占用空间，影响布局。
display:none 可以隐藏某个元素，隐藏的元素不会占用空间。原本的空间也会消失。

8.2 display改变类型

CSS样式有以下三个：

display:block – 显示为块级元素如：p h1 div hr dl ul ol
display:inline – 显示为内联元素如： span a
display:inline-block – 显示为内联块元素，即：虽然是行内元素但可以设置宽高内外边距。

9. 复合选择器

作用：可以更准确更精细的选择目标元素标签。

9.1 全局选择器

语法：* {} 一般去掉标签的一些默认效果的时候使用，或者整站通用效果时使用。但是不推荐，一般将 * 替换为常用标签的名称，并用逗号分隔，其实就是使用并集选择器。

* {     /*整个网站的通用样式，所有的页面都需要去除某些元素*/
   color:#030303; 
   margin:0px;
   padding:0px;
   font:normal 14px "微软雅黑";
   ...
}

9.2 并集选择器

语法：选择器1，选择器2{}

.myp,div  {/*选择器的类型不限，可以是类选择器、id选择器、元素选择器*/
    margin: 0;/*影响所有的div 和 class="myp"的标签*/
    padding: 0;
    color: #00fcdc;
}

9.3 交集选择器

条件：交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

语法：h1.class{属性：值}; /*第一个为元素选择器，第二个为class选择器，两个选择器之间不能有空格*/
/*相对用的较少*/

案例展示：
li.myli {  
	color: #7bf114;    /* 解释：选择一个标签，该标签是li且class="myli" */
   font-size:14px;
}

9.4 后代选择器

作用：用来选择元素或元素组的子孙后代。

语法: 父级  子级{属性:属性值;}/*选择器的类型不限,可以是类选择器、id选择器、元素选择器*/
/*判断方式: 在父类的内部，只要是符合子级标签的都会被影响*/

案例展示:
.myli li {
    color: #ef0007;
    font-size: 12px;
}
div #myp{
    font-size: 50px;
}

当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。

9.5 子元素选择器

作用：子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。

语法:  .class > h3{color:red;font-size:14px;} 
	 .demo > h3 {color: red;}   
/*说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。*/

案例展示:
.demo > h3 {
    color: red;
}

9.6 选择器比对

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 p .one
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header

10. 伪类选择器

10.1 分类

伪类选择器常作用于超链接 “a”

 /*伪类选择器的属性*/
a:link     未访问的链接 
a:visited  已访问的链接 
a:hover    鼠标移动到链接上
a:active   选定的链接,即长按的状态

案例展示：
<style>					
			a:link{
				color: red; /*默认颜色是红色*/	
			}
			a:visited{
				color: blue; /*访问过的页面是蓝色*/	
			}
			a:hover{
				color: green;/*鼠标悬浮是绿色*/	
				font-size: 28px;
			}
			a:active{
				color: gold;/*按下鼠标不放手是金色*/	
				font-family: "微软雅黑";
			}
		</style>
	</head>
	<body>
		<a href="03-常用样式.html" target="_blank">常用样式</a>
		<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
	</body>
</html>

10.2 注意事项

写的时候顺序不要颠倒 。否则可能引起错误。
因为叫链接伪类，所以都是利用交集选择器 a:link a:hover
因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
实际开发中，我们很少写全四个状态

ANONYMOUS%

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4. CSS

CSS 的浮动会使元素向左或向右移动，并使周围的元素重新排列。浮动往往是用于图像，但它在布局时一样非常有用。当浮动的元素向左或向右移动直到外边碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。关于彼此相邻的元素如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
复制链接

扫一扫