HTML+CSS(二)

小石Sir.

已于 2022-09-25 16:30:17 修改

阅读量544

点赞数 10

于 2022-09-06 23:46:55 首次发布

本文链接：https://blog.csdn.net/qq_19262747/article/details/126733440

版权

HTML CSS JavaScript 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS的基础知识，包括其作用、语法、注释、引入方式（内联、嵌入、外部）以及优先级。重点讲解了选择器的种类，如标签选择器、类选择器、ID选择器等，并探讨了布局样式属性和文本样式属性。此外，还讨论了元素溢出的处理和display属性的使用，帮助读者快速掌握CSS的基本概念和实践技巧。

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

CSS

css介绍

1.初始css

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

2.css的作用

美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式
控制页面布局, 比如: 设置浮动、定位等样式

3.css的代码语法

css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：
在这里插入图片描述
选择器:是用来选择标签的，选出来以后给标签加样式。
声明：在英文大括号“｛｝”
代码示例:

p {
	color:red;
	font-szie:12px;
}

注意：样式规则需要放到大括号里面

4.css的注释

注释语句: 用 /* 注释语句 */ 来表明
代码示例:

p {
	font-size:12px; /*设置文字字号为12px*/
	color:red; 	    /*设置文字颜色为红色*/
}

css引入方式

css样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种

1.内联式

内联式：把css代码直接写在现有的HTML标签中
代码示例：

<p style="color:red">这里文字是红色。</p>

优点：方便、直观
缺点：缺乏可重用性

2.嵌入式

嵌入式：在<head>标签内加入<style>标签，在<style>标签中编写css代码
代码示例：

<head>
   <style type="text/css">
      p {
         color:red;
      }
   </style>
</head>

优点：在同一个页面内部便于复用和维护
缺点：在多个页面之间的可重用性不够高

3.外部式

外部式：将css代码写在一个单独的.css文件中，在<head>标签中使用<link>标签直接引入该文件到页面中
代码示例：

<link rel="stylesheet" type="text/css" href="css/main.css">

优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高
缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱

4.三种引入方式优先级

内联式 > 嵌入式 > 外部式

css选择器

css 选择器是用来选择标签的，选出来以后给标签加样式

1.css选择器的分类

标签选择器
类选择器
id选择器
子选择器
后代选择器
通用选择器
伪类选择器
分组选择器

1.标签选择器

根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置
代码示例：

p {
	color:red;
	font-size:12px;
}

2.类选择器

根据类名来选择标签，以 . 开头，一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用
代码示例：

<head>
	<style type="text/css">
		.red {
			color:red;
		}
	</style>
</head>
<body>
	<p class="red">我爱学编程</p>
</body>

注意：
1、英文圆点开头
2、其中类选器名称可以任意起名（不能起中文）

3.id选择器

根据id选择标签，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用
代码示例：

<head>
	<style type="text/css">
		#red {
			color:red;
		}
	</style>
</head>
<body>
	<p id="red">我爱学编程</p>
</body>

注意：
1、使用ID选择器，必须给标签添加上id属性，为标签设置id=“ID名称”，而不是class=“类名称”
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）
3、id属性的值既为当前标签的id，尽量见名思意，语义化

4.子选择器

大于符号(>),用于选择指定标签元素的第一代子元素
代码示例：

<head>
	<style type="text/css">
		span>p {
			color:red;
		}
	</style>
</head>
<body>
	<span>
		<p>我爱编程</p>
	</span>
</body>

5.后代选择器

即加入空格,用于选择指定标签元素下的后辈元素
代码示例：

<head>
	<style type="text/css">
		span p {
			color:red;
		}
	</style>
</head>
<body>
	<span>
		<p>我爱编程</p>
	</span>
</body>

注意:
这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器

6.通用选择器

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素
代码示例：

 11. {
	color:red;
}

7.伪类选择器

用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器
代码示例：

<head>
	<style type="text/css">
		div {
			width:120px;
			height:120px;
		}
		div:hover {
			width:150px;
			height:150px;
		}
	</style>
</head>
<body>
	<div>块级元素</div>
</body>

8.分组选择器

根据组合的选择器选择不同的标签，以 , 分割开, 如果有公共的样式设置，可以使用组选择器
代码示例：

h1,span {
	color:red;
}

css样式

1. 布局常用样式属性

width 设置元素(标签)的宽度，如：width:100px;
height 设置元素(标签)的高度，如：height:200px;
background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。
border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;
margin 设置元素和外界的距离，也叫外边距，如margin:20px;
float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;

2.文本常用样式属性

color 设置文字的颜色，如： color:red;
color 设置文字的颜色，如： color:red;
font-family 设置文字的字体，如：font-family:‘微软雅黑’;为了避免中文字不兼容，一般写成：font-family:‘Microsoft Yahei’;
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

css的元素溢出

1.什么是 css 元素溢出

当子元素(标签)的尺寸超过父元素(标签)的尺寸时，此时需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来完成
overflow的设置项：

visible 默认值, 显示子标签溢出部分
hidden 隐藏子标签溢出部分
auto 如果子标签溢出，则可以滚动查看其余的内容

2.示例代码

<style>
    .box1{
        width: 100px;
        height: 200px;
        background: red;
        /* 在父级上设置子元素溢出的部分如何显示 */
        /* overflow: hidden; */
        overflow: auto;
    }
    .box2{
        width: 50px;
        height: 300px;
        background: yellow;
    }
</style>
 
<div class="box1">
    <div class="box2">hello</div>
</div>

css的显示特性

1. display 属性的使用

display 属性是用来设置元素的类型及隐藏的，常用的属性有：

none 元素隐藏且不占位置
inline 元素以行内元素显示
block 元素以块元素显示

2.代码示例

<style>
    .box{
        /* 将块元素转化为行内元素 */
        display:inline;
    } 
 
    .link01{
        /* 将行内元素转化为块元素 */
        display:block;
        background: red;
 
    }
 
    .con{
        width:200px;
        height:200px;
        background:gold;
 
        /* 将元素隐藏 */
        display:none;
    }
 
</style>
 
<div class="con"></div>
<div class="box">这是第一个div</div>
<div class="box">这是第二个div</div>
<a href="#" class="link01">这是第一个链接</a>
<a href="#" class="link01">这是第二个链接</a>