CSS 和 HTML结合

最新推荐文章于 2022-08-23 20:48:06 发布

我是泛滥

最新推荐文章于 2022-08-23 20:48:06 发布

阅读量353

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45627031/article/details/107807206

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS 和 HTML结合

了解CSS:

CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

CSS实现的两种方式：

第一种：直接在标签<div>的 style 属性上设置”key:valuevalue;”，修改标签样式

<div style="border: 1px solid red;">div 标签 1</div>

第二种：在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式

<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<!--style 标签专门用来定义 css 样式代码--> 
<style type="text/css"> 
div{ 
	border: 1px solid red; 
	} 
span{ 
	border: 1px solid red; 
	} 
</style> 
</head>

第三种：把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可

<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<!--link 标签专门用来引入 css 样式代码--> 
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>

CSS 选择器

1.标签名选择器 #标签名{ 属性：值; }

2.id 选择器 #id 属性值{ 属性：值; }

3.class 类型选择器 # .class 属性值{ 属性：值; }

4.组合选择器  选择器 1，选择器 2，选择器 n{ 属性：值; }

常用样式

1、字体颜色

 color：red；

2、宽度

width:19px; 宽度可以写像素值：19px； 也可以写百分比值：20%；

3、高度

height:20px; 高度可以写像素值：19px； 也可以写百分比值：20%；

4、背景颜色

background-color:#0F2D4C

4、字体样式：

color：#FF0000；字体颜色红色 font-size：20px; 字体大小

6、像素实线边框

border：1px solid red;

7、DIV 居中

margin-left:auto; 
margin-right:auto;

8、文本居中：

text-align:center;

9、超连接去下划线

text-decoration:none;

10、表格细线

table{ border:1pxsolidblack;/*设置边框*/
border-collapse:collapse;/*将边框合并*/ } 
td,th{ border:1pxsolidblack;/*设置边框*/ }

11、列表去除修饰

ul{ list-style:none; }

我是泛滥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 和 HTML结合

CSS 和 HTML结合了解CSS:CSS实现的两种方式：CSS 选择器常用样式了解CSS:CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS实现的两种方式：第一种：直接在标签<div>的 style 属性上设置”key:valuevalue;”，修改标签样式<div style="border: 1px solid red;">div 标签 1</div> 第二种：在 head 标签中，使用 s
复制链接

扫一扫

专栏目录