CSS基础语法

最新推荐文章于 2024-06-19 16:24:42 发布

忆搁浅啊

最新推荐文章于 2024-06-19 16:24:42 发布

阅读量105

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_37839978/article/details/99755799

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS概述

CSS		(Cascading Style Sheets)层叠样式表
作用：
	美化HTML

格式

<head>
	<title>Title</title>
	<style>
		p {
		....
		}
	</style>
</head>
描述:
	定义在head标签里面，用style标签定义的，可以是任何html标签

插入样式表的三种方式

第一种：外部样式表

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

第二种：内部样式表(位于head标签内部)

<style type="text/css">
	p{
	...
	}
</style>

第三种：内联样式

<p style="color:white;"></p>

基本语法

组成

选择器				属性			值
html中的标签		要设置的	   固定的、
注意：
	多个样式之间用;隔开
	display:inline;去除换行

选择器的种类

1、元素选择器

如
p{
  color:white;
}

div和span

div是用来划分块状结构的
span是用来设置字体的，和font差不多

**2、类选择器 **

<head>
<style>
	.name {
      ......
	}
</style>
	</head>
<body>
<div class="name"></div>
</body>

解释

对标签添加class属性，就可以在前面使用.class名字的方式设置样式了

3、id选择器

同类选择器一样，只不过是id=name，使用#id
有一点注意：
	类选择器可以多个都是用这一个的格式
	但id选择器只能使用一个

派生选择器

简介：
	就是表示一种类似于子目录下的
比如有一个：<div><p></p></div>
		若我们指向要对div下面的p设置样式。
		div p
			对div下面所有的p设置
二：
	  div>p{
            color:red;
            font-size:60px;
        }
        <div>
        <ul>
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        </ul>
        <p>清明上河园</p>
    </div>
   这个就只对div下面的p设置
三：对多个设置成相同的样式时
	直接使用h,p{}就可以

背景样式

1、background-color				   背景颜色

2、background-image:url('')		    背景图片

3、background-repeat				   背景图片是否重复
参数：repeat			 			重复
	 no-repeat		   			   不重复
	 repeat-x		   			   水平方向重复
	 repeat-y					   垂直方向重复
4、background-position 			   背景定位
参数：
	(top,center,bottom)(left,center,right)任意两种组合
	可以设置百分比：50% 50% x，y
 或者设置px：x，y
5、background-attachment				固定图片，防止滚动
参数：
	fixed

文本样式

文字颜色color

1、文本缩进

text-indent
三种选项：
	em	长度单位1em=16px
	px		像素
	%		百分比

2、水平对齐

text-align
参数：
	left，center，right

3、文本装饰

text-decoration
参数：
	none		无装饰
	underline	下划线
	overline	上划线
	line-through	删除线

4、行间距

line-height
参数：
	px			像素

字体样式

1、指定字体：

font-family：
参数：
	sans-serif

2、字体尺寸

font-size

3、字体粗细

font-weight
参数：
	normal				默认值。标准的字符串
	bold				粗
	bolder				更粗
	lighter				细
	100-900				700==bold   400==normal

4、字体样式简写

font:bolder 50px	sans-serif
	粗细	尺寸		字体

框模型

内边距

padding：
	边框和内容之间
可以设置上->右->下->左
单边内边距：
	padding-top
	padding-right
	padding-bottom
	padding-left

边框

border-style：
	参数：dotted				点状边框
		 dashed				  虚线
		 double				  双线
		 solid			       实线
单边边框：
	border-top-style
	border-right-style
	border-left-style
	border-bottom-style

边框宽度

border-width：
	属性px

边框颜色

border-color：
	。。。

边框简写

border:solid red 15px
边框		颜色		宽度

外边距

margin
margin-top
margin-right
bottom
left
其实就是距离顶部的距离

忆搁浅啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础语法

CSS概述CSS (Cascading Style Sheets)层叠样式表作用：美化HTML格式<head> <title>Title</title> <style> p { .... } </style></head>描述: 定义在head标签里面，用style标签定义的，可以是任何...
复制链接

扫一扫

专栏目录