CSS

CSS：层叠样式表（Cascade Style Sheet）

一：位置
1.行内样式表: 标签/元素上 style="样式属性1:值1;样式属性2:值2..."属性，修改html元素的样式
2.内嵌样式表: 写在head里 创建<style></style> 可以写注释 /**/
3.外联样式表: 创建一个css文件(直接的样式作用) 将样式引入到目标页面 
		<link rel="stylesheet" type="text/css" href="目标.css" />
总结：行内》》》内嵌/外联 ，内嵌/外联 就近原则
※：样式遵从就近原则：谁离作用标签近就选谁。

二：类型
1.id 通过id值来访问标签，改变标签的样式 #id值 来访问
2.类 class .class值 来访问
3.标签 标签名 来访问

id>>>类>>>标签
补充:样式共用
并列使用,将一个样式作用在多个标签上。
包含使用[空格] 将样式批量作用。
		#d1,.cla1,.cla1 p{
		color:#FFFFFF;
		}

字体：
font-size ：（1~900px）font-family：字体样式（微软雅黑）
font-style：normal italic oblique 正常 斜体 倾斜
font-weight: 100~900(+100) bold bolder lighter
font-variant:small-caps:小写字母边大写 并写的小一点
font-family:微软雅黑;

背景:
background-image:url(../images/06.jpg); 背景图
background-repeat:no-repeat; 是否重复
background-attachment:scroll; 是否滚动
background-position:50% 50%; 设置相对位置
background-color:red; 设置背景色
background: transparent：设置背景为透明，可作用于table，div，按钮等。
			


文本：
word-spacing:单词距离 汉字不支持
letter-spacing:字母距离 中文支持
text-decoration: •none •underline(下划线) •overline（上划线） •line-through（中划线） 
				•blink（闪烁 现浏览器已不支持）
text-transform:none capitalize(单词首字母大写) uppercase（所有单词大写）
				lowercase（所有单词小写） inherit（遵从父类）
text-align:left right center justify inherit
vertical-align: top bottom middle

表格的一些设置属性：（边框）
table,tr,td,th{
		border:5px dashed blue;
		/*
			border ：边框像素 solid（实线）dashed(虚线) 颜色
		*/
	}

border-collapse:collapse;/*取消累加效果*/
//取消table与tr之间的叠加效果

vertical-align:top;/*垂直对齐方式*/
    .main{
            width:600px;
            height:50px;
            vertical-align:top;/*垂直对齐方式*/
     }

table{
		background-image:url(D:/HTMLDemo/20190121/images/06.jpg);
	}/*背景图片*/


超链接的伪类

•a:link - 普通的、未被访问的链接
•a:visited - 用户已访问的链接
•a:hover - 鼠标指针位于链接的上方
•a:active - 链接被点击的时刻

border ：边框像素 solid（实线）/dashed(虚线)  颜色

        div,h1,p,img{
                border:1px solid blue;
            }

主要作用

主要作用:

​ 用来美化我们的HTML页面的

​ HTML 决定网页的骨架 ,CSS 化妆

​ 将页面的HTML和美化进行分离

CSS的简单语法:

在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中

<style>
  选择器{
    属性名称:属性的值;
    属性名称2: 属性的值2;
  }
</style>

元素选择:

元素的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

ID选择器:

以#号开头  ID在整个页面中必须是唯一的s
#ID的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

类选择器：

以 . 开头 
.类的名称{
   属性名称:属性的值;
  	属性名称:属性的值;
}

CSS引入方式

外部样式: 通过link标签引入一个外部的css文件

内部样式: 直接在style标签内编写CSS代码

行内样式: 直接在标签中添加一个style属性, 编写CSS样式

CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间

float属性:
    left
    right

    clear属性: 清除浮动
    both : 两边都不允许浮动
    left: 左边不允许浮动
    right : 右边不允许浮动
    流式布局

	#div1{
		float:left;
	}
	#div2{
		float:left;
	}
	#div3{
		float:right;
		clean:none;
		/* 消除滑动属性*/
	}

CSS优先级

按照选择器搜索精确度来编写:		 	行内样式 > ID选择器 > 类选择器  > 元素选择器

就近原则: 哪个离得近,就选用哪个的样式

CSS样式表

主要作用:

美化页面：将页面美化和HTML代码进行分离,提高代码的服用型

• 选择器:

  • 元素选择器: 标签的名称{}
  • 类选择器: 以. 开头 .类的名称
  • ID选择器: 以#开头 , #ID的名称 (ID必须是页面上面唯一)

• CSS浮动:

  • float : left, right 不再占有正常文档流中的空间 , 流式布局
  • clear : both left right​

• CSS中的其它选择器

  • 选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}

  • 属性选择器:

    a[title]
    a[titile='aaa']
    a[href][title]
    a[href][title='aaa']
    

  • 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代

  • 子元素选择器: 父选择器 > 儿子选择器

  • 伪类选择器: 通常都是用在A标签上

CSS盒子模型（DIV+CSS）

CSS的盒子模型: 万物皆盒子
    内边距:  
    padding-top:
    padding-right:
    padding-bottom:
    padding-left:

	padding:10px;  上下左右都是10px
    padding:10px 20px;  上下是10px 左右是20px
    padding: 10px 20px 30px;  上 10px 右20px  下30px  左20px
    padding: 10px 20px 30px 40px;  上右下左, 顺时针的方向

外边距:
    margin-top:
    margin-right:
    margin-bottom:
    margin-left: 

CSS绝对定位:
	position: absolute
	top: 控制距离顶部的位置
	left: 控制距离左边的位置

CSS的img

CSS：层叠样式表

一切皆为框:
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。
与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，
即“行内框”。

position属性：元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
1.absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
2.fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
3.relative 生成相对定位的元素，相对于其正常位置进行定位。
4.static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
5.规定应该从父元素继承 position 属性的值。
例子:
table{
  position:relative;
  left:450px;/*本身的属性是可以起作用的*/
}


使用 margin 属性来水平对齐
margin-left:auto;
margin-right:auto;
使用 position 属性进行左和右对齐
right:0px;
width:300px;
使用 float 属性来进行左和右对齐
float:right;
width:300px;

list-style-type:none - 删除圆点。导航栏不需要列表项标记。
把外边距和内边距设置为 0 可以去除浏览器的默认设定。
list-style-type:none;
margin:0;
padding:0;

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。

IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
}
---------------------------------------------------------------------------
延申：
修改所有图片的颜色为黑白 (100% 灰度):
img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

阴影:
img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}

将图像转换为灰度图像:
img {
    -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
}

反转输入图像:
img {
    -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
    filter: invert(100%);
}

转换图像饱和度:
img {
    -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
    filter: saturate(800%);
}

box-shadow: inset 0 0 1px #fff, 
		    inset 4px 4px 20px  rgba(255,255,255,0.33), 
			inset -2px -2px 10px rgba(255,255,255,0.25);
所表示的含义是，无偏移1像素模糊白色阴影
重叠于左上角4像素偏移20像素模糊透明度0.33的白色内阴影
再重叠于右下角偏移2像素，模糊10像素，透明度0.25的白色内阴影。
    #i1{
    opacity:1.0;
    filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
    box-shadow:0 0 30px 10px rgba(255,255,255,.7) inset;
    }

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
	ul{
		list-style-type:none;
		margin-left:auto;
		margin-right:auto;
		padding:0;
		margin:0;
	}
	img{
		width:620px;
		height:380px;
	}

	#i1{ /*滤镜效果*/
		opacity:1.0;
		filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
       
		box-shadow:0 0 30px 10px rgba(255,255,255,.7) inset;
	}

	#i1:hover{/*伪类 当鼠标放在图片上时显示效果*/
		/*opacity:0.4;
		filter:alpha(opacity=40);  针对 IE8 以及更早的版本 */

		/*-webkit-filter: grayscale(100%); 
		filter: grayscale(100%); Chrome, Safari, Opera  黑白*/
		
		/* -webkit-filter: drop-shadow(8px 8px 10px green); 
		filter: drop-shadow(8px 8px 10px green); Chrome, Safari, Opera 阴影*/

		/* -webkit-filter: invert(100%); 
		filter: invert(100%);Chrome, Safari, Opera 位素反转*/

		/* -webkit-filter: saturate(800%); 
		filter: saturate(800%);Chrome, Safari, Opera 色调加深*/
	}
  </style>
 </head>
 <body>
	<ul>春节打折季
		<li><a href="#">《鬼泣》<a></li>
		<li><a href="#">《生化危机2 重置》<a></li>
		<li><a href="#">《国王之心》<a></li>
		<li><a href="#">《圣歌》<a></li>
	</ul>
	<hr>
	<img src="../images/03.jpg" id="i1"/>
 </body>

</html>

当table中设置对齐方式居中时，设置CSS样式对其影响

前提
<table align="center" cellspacing="0px" border="1px" cellpadding="0px"  width="750px"></table>

 <style>
	table{<!--无影响-->
		position:absolute;
		left:150px;/*大于本身属性的作用*/
	}
	table{<!--无影响-->
		position:fixed;
		left:150px;
	}
	table{<!--有影响，在对齐的基础上再往右450px-->
		position:relative;
		left:450px;/*本身的属性是可以起作用的*/
	}
  </style>