CSS基础语法

2019-08-19 20:01:05 阅读：197 来源： 互联网

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中的标签		要设置的	   固定的、
注意：
	多个样式之间用;隔开

选择器的种类

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)任意两种组合
5、background-attachment				固定图片，防止滚动
参数：
	fixed

文本样式

文字颜色color

1、文本缩进

text-ident
三种选项：
	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
其实就是距离顶部的距离

标签：样式,基础,边框,语法,div,font,border,选择器,CSS
来源： https://blog.csdn.net/qq_37839978/article/details/99755799

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9