css常用属性样式

一.css简介

1.css概念
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.css用途及规范
什么是css?
CSS :全称：Cascading Style Sheets 层叠样式表,定义如何显示HTML元多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的，应用优先级高的，不冲突的共同作用。
css的用途
css能帮助我们美化网页,并且使用外部样式导入的css文件可以提高代码复用性,从而提高工作效率,其使html内容与样式表现分离,便于项目的后期维护。
css书写规范
css规则主要由两个组成部分构成:选择器,以及一条或多条声明.
选择器:需要改变的html元素.
声明:每条声明由一个属性和一个值组成.
基础语法
选择器｛属性：值;属性:值…… ｝

h1{color:red;font-size:14px;}

注意事项:

• 使用花括号来包围声明
• 如果值为若干单词，则要给值加引号
• 多个声明之间使用分号;分开
• css对大小不敏感，如果涉及到与html文档一起使用时，class与id名称对大小写敏感

二.css的导入方式

css的导入方式可分为四种:内嵌式,内部式,外部式,@import方式。
内嵌式
把CSS样式嵌入到html标签当中，类似属性的用法

<div style="color:blue;font-size:50px">这是内嵌方式 </div>

内部式
在head标签中使用style标签引入css

<style type=“text/css”>   //告诉浏览器使用css解析器去解析
	div{color:red;font-size:50px}
</style>

外部式
将css样式抽成一个单独文件，使用者直接引用

创建单独文件 div.css
内容示例：div{color:green;font-size:50px}
引用语句写在head标签内部
	<link rel="stylesheet" type="text/css" href=“div.css"></link>
    rel:代表当前页面与href所指定文档的关系
    type:文件类型，告诉浏览器使用css解析器去解析
    href:css文件地址

@import方式(不推荐)
在页面中引入一个独立的单独文件

<style type="text/css">
       @import url("div.css")
  </style>
 该内容放在head标签中

link导入和@import方式导入的区别:

• link所有浏览器都支持，@import某些版本低的IE不支持
• @import是等待html加载完成才加载(css样式下载完页面才会被加载,受限于网速,容易导致白屏)
• @import不支持js动态修改

三.css选择器

用于选择需要添加样式的html元素
基本选择器
元素选择器:在head中使用style标签引入在其中声明元素选择器:html标签{属性:属性值},选中的是全部相同的标签

<style type="text/css">
    span{color: red;font-size: 100px}  //所有span标签样式发生改变
</style>    

id选择器： 给需要修改样式的html元素添加id属性标识，在head中使用style标签引入在其中声明id选择器: #id值{属性:属性值}

创建id选择器：
	<div id="d1">hello,everyone!</div>
	<div id="d2">hello,everyone!</div>
    <div id="d3">hello,everyone!</div>
根据id选择器进行html文件修饰 
    <style type="text/css">
		#d1{color: red;font-size: 100px}
		#d2{color: green;font-size: 100px}
		#d3{color: blue;font-size: 100px}
    </style>

class选择器：给需要修改样式的html元素添加class属性标识，在head中使用style标签引入在其中声明class选择器: .class名{属性:属性值}

创建class选择器：
    <div class="d1">hello,everyone!</div>
    <div class="d2">hello,everyone!</div>
    <div class="d3">hello,everyone!</div>
根据id选择器进行html文件修饰：
    <style type="text/css">
        .d1{color: purple;font-size: 100px}
        .d2{color: pink;font-size: 100px}
        .d3{color: yellow;font-size: 100px}
    </style>

id选择器和class选择器的区别:
w3c标准规定，在同一个页面内容中，不允许有相同名字的id对象出现，但是允许相同相同名字的class,即一个id只能唯一,而class可以有多个实现(重复利用)
优先级别:
id选择器>class选择器>元素选择器.

属性选择器
根据元素的属性及属性值来选择元素,定义格式:htm标签[属性=‘属性值’]{css属性:css属性值;}或html标签[属性]{css属性:css属性值;}

	p[class]{
				color: blue;
			}
			/*指定class为b的*/
			p[class="b"]{
				color: greenyellow;
			}
			/*以xxx开头的属性选择器*/
			p[class^="a"]{
				color: cyan;
			}
			/*以xxx结尾的属性选择器*/
			p[class$=a]{
				color: brown;
			}
//body中的标签
		<p id="a">学习java</p>
		<p class="b">准备就绪</p>
		<p style="color: blue;">这是内嵌式</p>
		<p class="abbc">孤鸿寡鹄</p>
		<p class="bca">html</p>
		<p class="addsc">java</p>

伪元素选择器
主要是针对与a标签,可实现简单的动画效果
常用语法:

• 静止状态 a:link{css属性}
• 悬浮状态 a:hover{css属性}
• 触发状态 a:active{css属性}
• 完成状态 a:visited{css属性}

代码：
	<a href="https://hao.360.cn/">点我吧</a>
样式：
    <style type="text/css">
        <!--静止状态 -->
        a:link {color: red;}
        <!--悬浮状态 -->’
        a:hover {color: green;}
        <!--触发状态 -->
        a:active {color: yellow;}
        <!--完成状态 -->
        a:visited {color: blue;}
    </style>

层次选择器
父级选择器 子级选择器….

/*后代选择器 ,选择后代*/
			div p{
				color: #0000FF;
			}
			/*子代选择器,选择子代*/
			ul>li{
				color: deepskyblue;
			}
			/*兄弟选择器,选择相邻兄弟*/
			p+span{
				color: chocolate;
			}
//body标签
	<div id="bb">
			<p>牛气冲天</p>
			<ul>
				<li>红红火火</li>
				<a href="#">哔哩哔哩</a>
				<li>恍恍惚惚</li>
				<li>妞妞你看牛</li>
			</ul>
			<p>飞飞飞</p>
			<span>水水水水</span>
		</div>

四.常用css样式

文字属性

属性名	取值	描述
font-size	数值	设置字体大小
font-family	默体、宋体、楷体等	设置字体样式
font-style	normal正常; italic斜体;	设置斜体样式
font-weight	100~900数值;bold;bolder;	粗体样式

文本属性

属性名	取值	描述
color	十六进制;表示颜色的英文单词;	设置文本颜色
text-indent	5px缩进5像素;20%缩进父容器宽度的百分之二十;	缩进元素中文本的首行
text-decoration	none;underline;overline;blink;	文本的装饰线
text-align	left;right;center	文本水平对齐方式
word-spacing	normal;固定值;	单词之间的间隔
line-height	normal;固定值;	设置文本的行高
text-shadow	四个取值依次是： 水平偏移；垂直偏移；模糊值；阴影颜色；	设置阴影及模糊效果

块元素中,设置行高与标签高度一致,可让文本居中.
背景属性

属性名	取值	描述
background-color	16进制;用于表示颜色的英语单词;	设置背景色
background-image	url(‘图片路径’)	设置背景图片
background-repeat	repeat-y;repeat-x;repeat;no-repeat;	设置背景图的平铺方向
background-position	top;bottom;left;right ; center;	改变图像在背景中的位置

列表属性

属性名	取值	描述
list-style-type	disc等	改变列表的标识类型
list-style-image	url(“图片地址”)	用图像表示标识
list-style-position	inside;outside	标识出现在列表项内容之外还是内部

显示属性
显示属性display ，可让块标签和标签相互转换,以下是常用取值：

• none:不显示
• block:块级显示
• inline:行级显示

注:display:显示为行内块元素，表现为同行显示并可修改宽高内外边距等属性（行内块元素默认属性）
轮廓属性
绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。常用属性：

属性名	取值	描述
outline-style	solid(实线)/dotted(虚线)/dashed(虚线)等	设置轮廓的样式
outline-color	16进制;用于表示颜色的英文	设置轮廓的颜色
outline-width	数值	设置轮廓的宽度

浮动属性
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样(脱离文档流)。

取值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

注:使用浮动后应该clear清除浮动

定位属性
相对定位(relative)：元素框偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留。
绝对定位(absolute)：元素框从文档流完全删除，并相对于其包含块进行定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框。
固定定位(fixed)：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

五.盒子模型

边框相关属性

属性名	取值	描述
border-style	solid;double;dashed;dotted等	设置边框的样式
border-color	16进制;用于表示颜色的英文;	设置边框的颜色
border-width	数值	设置边框的粗

外边距相关属性

margin：外间距,边框和边框外层的元素的距离

属性名	取值	描述
margin	top;right;bottom;left	四个方向的距离
margin-top	数值	上间距
margin-bottom	数值	下间距
margin-left	数值	左间距
margin-right	数值	右间距

6.3 内边距相关属性

padding-left:左内边距
padding-right:右内边距
padding-top:上内边距
padding-bottom:下内边距
同上

六.css3扩展属性

border-radius创建圆角

示例：border-radius: 25px;

box-shadow:用于向方框添加阴影

示例：box-shadow: 10px 10px 5px #888888;

background-size: 属性规定背景图片的尺寸

<body style="text-align: center;
    background:url(img/1.png);
    background-size: 200px 300px;
    background-repeat: no-repeat;">
</body>

text-shadow: 可向文本应用阴影。
示例：text-shadow: 5px 5px 5px #ffff00; //参数分表代表 水平偏移,垂直偏移,阴影度,颜色