css样式设置

最新推荐文章于 2024-07-24 14:20:14 发布

柏舟与洲

最新推荐文章于 2024-07-24 14:20:14 发布

阅读量186

点赞数

分类专栏： html、css学习文章标签： css

本文链接：https://blog.csdn.net/weixin_45258054/article/details/105984078

版权

html、css学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS【Cascading Style Sheets】全称层叠样式表。

样式【CSS】用来美观页面
分为三种：内部样式，外部样式，行内样式

样式

内部样式
外部样式
行内样式
样式属性设置
背景样式

内部样式

需要书写在head中，利用子元素双闭合标签style标签完成
语法格式：

<style type=”text/css”>
      标签名字{
         属性:属性值;
         属性：属性值;
         属性：属性值;
}
</style>

标签选择器

通过标签名字匹配页面中对应标签进行设置内部样式

<style type="text/css">	
h1{
		color: red;/*字体颜色*/
		font-size: 40px;/*字体大小，最小12*/
		background-color: orange;/*背景颜色*/
		text-align: center;/*文本对齐*/
		opacity: 0.7;/*透明度0-1之间*/
		cursor: pointer;/*光标放置标签变小手*/
	}
div{
	color: cyan;
	font-size: 30px;
	font-style: italic;/*字体样式*/
	text-align: center;
	border: yellow 8px solid;/*边框颜色，粗细，固定*/
</style>

id选择器

通过id选择器匹配标签（节点:element），在style标签里面内部样式 #+id名称

<style type="text/css">	
		#box{
			color: black;
			text-decoration: none;/*文本描述*/
		}
</style>

class选择器

使用class(类)选择，ID选择器属性值一般唯一的、class属性值可以重复（不是唯一的）。

使用 .+class名

<style type="text/css">	
		.secondrow{
			text-decoration: overline;
		}
</style>

body内容

<body>
	<div>
	<h1><a href="https://hanyu.baidu.com/" id="box">登鹤雀楼</a></h1>
		<p>白日依山尽，黄河入海流</p>
		<p class="secondrow">欲穷千里目，更上一层楼</p>
	</div>
	<div>
	<h1><a href="https://hanyu.baidu.com/">静夜思</a></h1>
		<p>床前明月光，疑是地上霜</p>
		<p class="secondrow">举头望明月，低头思故乡</p>
	</div>
</body>

外部样式

样式可以放在CSS文件里面，在页面中通过link标签可以引入外部文件样式。

<!--引入外部样式-->
<link rel="stylesheet" type="text/css" href="../css/01.css"/>

行内样式

直接在开始标签的地方就可以设置，通过style属性进行设置。

<h1 style="font-style: italic;text-align: center;background-color: orange;width: 800px;height: 200px;">学习行内样式</h1>

优先级的：行内样式=>内部样式=>外部样式

样式属性设置

color【设置标签文字颜色】	red、orange、yellow、green、cyan、blue、purple
font-size【标签文字大小尺寸设置】	Numberpx (数字最小12~)
text-align【文本对齐方式】	left、center、right
font-style[字体样式]	italic
opacity【透明度设置】	0~1【0：纯透明】
cursor【鼠标】	pointer【小手】
text-decoration【文本描述】	none、underline、overline、line-throuth
list-style【列表样式】	none、circle、square
background-color	背景颜色设置（颜色）
Background-image	背景图(图片路径)
Backgrpund-repeat	背景图重复（no-repeat不重复）

背景样式

		<style type="text/css">
			div{
				width: 720px;
				height: 680px;
			/* 	background-color: cyan; */
			/* 	background-image: url(../img/log.gif);/*设置背景图*/ 
			/* background-repeat: no-repeat;/*背景图不平铺*/ 
			/* 简写 */
				background: cyan url(../img/log.gif) no-repeat;
			}
		</style>

柏舟与洲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css样式设置

CSS【Cascading Style Sheets】全称层叠样式表。样式【CSS】用来美观页面分为三种：内部样式，外部样式，行内样式样式内部样式标签选择器id选择器class选择器外部样式行内样式样式属性设置背景样式内部样式需要书写在head中，利用子元素双闭合标签style标签完成语法格式：<style type=”text/css”> 标签名字{ ...
复制链接

扫一扫

专栏目录