CSS(Cascading Style Sheets)

最新推荐文章于 2024-07-18 17:34:14 发布

forward93124

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量240

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_41342791/article/details/119222782

版权

层叠样式表

css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。
所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。
而css就可以分别为网页的各个层次设置样式。

内联样式

样式直接编写到 style 属性中;
内联样式只对当前的元素中的内容起作用;

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>CSS学习</title>
    </head>
    <body>
        <p style="color:red;font-size:40px;">CSS</p>
    </body>
</html>

选择器--01元素选择器

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>CSS学习</title>

        <!-- 
            通过css的元素选择器对html中的所有p元素进行样式设置
        -->
        <style type="text/css">
            p{
                 color:red;
                 font-size:40px;
             }
        </style>

    </head>
    <body>
        <p>CSS选择器样式</p>
    </body>
</html>

color:red; --> 字体颜色设置

font-size:40px; --> 字体大小设置

外部样式表与内部样式表

CSS语法

块元素与内联元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
		   块元素和内联元素
		   
		   div是一个块元素
		       所谓的块元素就是会独占一行的元素，无论他的内容有多少，他都会独占一整行。
			   P h1 h2 h3 ...
			   div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式，
			   div元素主要用于对页面进行布局的
		-->
		
		<div style="background-color: red;width: 200px;">
			我是一个div
		</div>
		
		<div style="background-color: aqua;width: 200px;">
			我是一个div
		</div>
		
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		
		<hr/>
		<!-- span是一个内联元素(行内元素) 所谓的行内元素，指的是只占自身大小的元素，
		     不会占用一行，常见的内联元素:
				a img iframe span
			 span没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式
			 
			 总结：
				块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式，
				一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
				a元素可以包含任意元素，除了它本身；
				p元素不能包含任何块元素；
		-->
		<span>我是一个span</span>
		<span>我是一个span</span>
	</body>
</html>

一、块元素 block element

块元素的特性

独霸一行，总是在新行上开始
宽度缺省是它父级元素的100%，除非设定一个宽度
高度、行高、外边距、内边距都可以设置
可以容纳其他内联元素或者其他块元素

常见的块元素

address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
isindex – input prompt
menu – 菜单列表
noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表

二、行内元素 inline element

特性：

和其他元素都在一行上，遇到父级元素边界会自动换行
高、行高以及内外边距都不可以改变
宽度与内容一样宽，且不可改变
行内元素只能容纳文本或者其他行内元素

对于行内元素，需要注意的是：设置宽度width无效，设置高度无效，可以通过设置line-height来设置，设置margin只有左右有效，上下无效，设置padding只有左右有效，上下无效

常见的行内元素

a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
bdo – bidi override
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
dfn – 定义字段
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
s – 中划线(不推荐)
samp – 定义范例计算机代码
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线

行内元素的间距问题
两个行内元素在一起，会出现一定的间距，即使将border、padding、margin都设置为零也无济于事，那么怎么才能去除这些间距呢？

1.重设字体
将行内元素的直接父级设置font-size=0px;再给行内元素设置字体大小就可以解决。

2.借助HTML注释
在两个行内元素之间加入HTML注释，告诉浏览器这中间不是换行也不是空格，而是连接在一起的，这样也可以解决。

三、行内块元素

行内块元素的特性

元素排列在一行
宽度默认由内容决定
元素间默认有间距
支持宽高、外边距、内边距的所有样式的设置

forward93124

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS(Cascading Style Sheets)

层叠样式表css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。而css就可以分别为网页的各个层次设置样式。内联样式样式直接编写到 style 属性中; 内联样式只对当前的元素中的内容起作用;<!doctype html><html> <head> <meta charset="utf-8"/> <title
复制链接

扫一扫