css复习记录

css复习全记录
本文只是个人复习记录所用，初学者可以借鉴，会写大部分基础的用法，以及我个人的感悟
初学者如果想快速查询可以直接 ctrl +f 找到你想要的，下面的东西都是实际中用到的。

理论：

css 规则由两个主要的部分组成 选择器和一条声明或者多条声明
选择器 ：需要改变的样式的html元素
属性：希望设置的样式属性
声明： 以分号;分开，声明组 以大括号{}括起来

table{
padding:20px;
color:red;
}

CSS注释

 /* 注释内容 */

选择器

id选择器  <p id="a">123</p>  
class选择器  <p class="b">123</p>  
<style>
  #a{
  }
  .b{
  }
</style>

样式 优先级 从内往外

外部样式表

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

内部样式表

    <style>
         css内容
    </style>

内联样式表

 <h5  style="color:red;"></h5>

背景设置

background-color：颜色

 1. 十六进制 - 如："#ff0000"    
 2. RGB - 如："rgb(255,0,0)"   
 3.  颜色名称 - 如："red"

background-image：图像，设置图片

 1. body {background-image:url('paper.gif');}

background-repeat：背景图像，水平或垂直平铺

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;     （repeat-x  repeat-y   水平或者垂直平铺，no-repeat; 或者不平铺）
}

background-attachment 背景图像是否固定或者随着页面的其余部分滚动。

scroll	背景图片随页面的其余部分滚动。这是默认
fixed	背景图像是固定的
inherit	指定background-attachment的设置应该从父元素继承
local	背景图片随滚动元素滚动

background-position 背景图像 定位（元素：right,top,left,booton,center 也可以用百分比来控制 50%，50%）

css 文本

文本颜色

color：

设置文本方向

direction：默认（rtl    right-to-left）自行发挥

设置文本间距

letter-spacing ：2px;

设置行高(是行与行之间的高)

line-height 90% (百分比)

设置文本对齐方式

text-align  元素：center  left  reight top  button

设置文本装饰方式（上划线，下划线，中线）

text-decoration   元素：overline,line-through,underline

缩进元素中文本的首行

text-indent :  50px

设置文本阴影

text-shadow: h-shadow v-shadow blur color;  允许负值  就是反方向
text-shadow    只能设置两个方向  5px 5px  #fff000 颜色

设置英文大小写

text-transform  元素：uppercase 全部大写  capitalize  全部小写  lowercase 首字母大写

设置文本方向

unicode-bidi  embed正方向  bidi-override反方向

设置元素垂直对齐 设置元素与元素之间的 对齐 比如图片和文字的 错位位置

 vertical-align    元素：top middle bottom

是否保存原文本的 换行和空格

white-space 元素  nowrap:不会换行 一行  pre-wrap pre-line 保留换行

设置字间隔

word-spacing  word-spacing:30px; 

字体

定义字体 ： https://www.w3cschool.cn/cssref/css-websafe-fonts.html 链接给出类型
字体样式：

 - Serif 字体 
 - sans - serif字体 
 - Monospace 字体

font-style:

 - 正常：normal 
 - 斜体：italic 
 - 倾斜：oblique

字体大小：三种 像素（40px）和em 2.5em 或者百分比 50%

 - font-size ：40px
 - font-size ：2.5em
 - font-size ：50%

控制字体粗细：

font-weight 元素 :

 - bold 粗  
 - bold 更粗  
 - lighter细   
 - 或者数值   400相当于normal（自行发挥）

链接

链接样式：

 - a:link - 正常，未访问过的链接
 - a:visited - 用户已访问过的链接
 - a:hover - 当用户鼠标放在链接上时
 - a:active - 链接被点击的那一刻      后面都可以跟上颜色，

背景修饰

 - a:link {background-color:#B2FF99;}
 - a:visited{background-color:#FFFF85;} 
 - a:hover {background-color:#FF704D;}
 - a:active {background-color:#FF704D;}

文本修饰

text-decoration  属性主要用来删除链接中的下划线   元素  none 无  underline  有

**列表样式

列表属性作用如下**

设置不同的列表项标记为有序列表    ol
设置不同的列表项标记为无序列表    ul  
设置列表项标记为图像

list-style-type属性 设置列表前面的 标点

none：不使用项目符号
disc：实心圆
circle：空心圆
square：实心方块
demical：阿拉伯数字 
lower-alpha：小写英文字母 
upper-alpha：大写英文字母 
lower-roman：小写罗马数字 
upper-roman：大写罗马数字

或者作为列表为标记的图像

list-style-image: url('sqpurple.gif');

实例：

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}
ul li {
  background-image: url(sqpurple.gif);
  background-repeat: no-repeat;
  background-position: 0px 5px;
  padding-left: 14px;
}

table表格

表格边框

border
table, th, td
{
border: 1px solid black;
}

折叠边框

border-collapse
table
{
border-collapse:collapse;
} 

表格宽度和高度

table,td,th
{
	border:1px solid black;
}
table
{
	width:100%;
}
th
{
	height:50px;
}

表格文字对齐

td
{
text-align:right;
}
td
{
height:50px;
vertical-align:bottom; 这里可以控制文本的位置
}

表格填充 在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：

td
{
padding:15px;
}

表格颜色 指定边框的颜色，和th元素的文本和背景颜色：

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

盒子模型：外边距，边框，内边框，内容

• Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
• Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
• Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
• Content（内容） - 盒子的内容，显示文本和图像

border 边框

border-style  边框风格：

	    dotted: 定义一个点线框
	    dashed: 定义一个虚线框
	    solid: 定义实线边界
	    double: 定义两个边界。 两个边界的宽度和border-width的值相同
	    groove: 定义3D沟槽边界。效果取决于边界的颜色值
	    ridge: 定义3D脊边界。效果取决于边界的颜色值
	    inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
	    outset: 定义一个3D突出边框。 效果取决于边界的颜色值

单独设计各个边：

border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid; 

border-style 	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 	设置元素的下边框的颜色。
border-bottom-style 	设置元素的下边框的样式。
border-bottom-width 	设置元素的下边框的宽度。
border-left 	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 	设置元素的左边框的颜色。
border-left-style 	设置元素的左边框的样式。
border-left-width 	设置元素的左边框的宽度。
border-right 	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 	设置元素的右边框的颜色。
border-right-style 	设置元素的右边框的样式。
border-right-width 	设置元素的右边框的宽度。
border-top 	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 	设置元素的上边框的颜色。
border-top-style 	设置元素的上边框的样式。
border-top-width 	设置元素的上边框的宽度。

表格轮廓

outline-style   ：
					    元素：
					    dotted
					    dashed
					    solid
					    double
					    groove
					    ridge
					    inset
					    outset

CSS Margin(外边距) CSS Margin属性接受任何长度单位、百分数值甚至负值 CSS Margin(外边距)属性定义元素周围的空间。

padding 填充：属性定义元素边框与元素内容之间的空间。

元素 top botton reight left

显示display和可见性visibility

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

h1.hidden {visibility:hidden;}

visibility属性虽然隐藏了，但是依然占空间，，布局存在
display  正好相反  

Positioning定位 允许您将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

Static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。 静态定位的元素不会受到top, bottom, left, right影响。

Fixed 定位

元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动： p.pos_fixed { position:fixed;
top:30px; right:5px; }

Relative 定位

相对定位元素的定位是相对其正常位置。

Absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于: p.pos_fixed {
position:Absolute ; top:30px; right:5px; }

float 浮动会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
清除浮动

.text_line { clear:both; }

水平浮动:

float:right

中心对齐,使用margin属性

.center { margin-left:auto; margin-right:auto; width:70%;
background-color:#b0e0e6; }

css组合选择符

组合选择符说明了两个选择器直接的关系。
在 CSS3 中包含了四种组合方式:

 - 后代选取器(以空格分隔) 
 - 子元素选择器(以大于号分隔） 
 - 相邻兄弟选择器（以加号分隔） 
 - 普通兄弟选择器（以波浪号分隔）

导航栏加下拉列表

自行发挥

<ul class="frits1">
  <li><a href="#home" class="active">主页
  <span class="tooltiptext">我是主页</span>
  </a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#content">联系</a></li>
  <li class="right">
  <div class="dropdown">
     <a href="#about" class="dropbtn">关于</a>
     <div class="dropdown-content">
      <a href="#">公司简介</a>
      <a href="#">招聘信息</a>
      <a href="#">工商编号</a>
     </div>
  </div>   
     </li>
</ul>
**css**
<style>
.frits1{
	margin: 0;
    padding: 0;
	list-style-type:none;
	overflow:hidden;
    margin:0px;
	padding:0px;
	background-color:#F0F;
	border-radius:6px;
	}

ul li{
	
	float:left;}
ul li a{
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	
	}	
.right{
	float:right;
	}
ul li a:hover:not(.active) {background-color:#0F0;}
ul.topnav li a.active {background-color: #F0F;}


	
.dropdown-content {
    display: none;
    position:fixed;
    top:60px;
    right:5px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content>a:hover {background-color:#00F}
.dropdown:hover .dropdown-content {
    display: block;
}
</style>

最后来说网页布局：

https://www.runoob.com/try/try.php?filename=trycss_website_layout_blog
菜鸟教程上的例子，完全适用大部分布局，自行发挥