CSS练习记录

css引入方式

内联引入

   <body>    
     <div style="color:red;width:100px;heigh:100px;">苹果</div>
     <div style="color:green;width:100px;heigh:100px;">苹果</div>
     <div style="color:gray;width:100px;heigh:100px;">核桃</div>
     <div style="color:yellow;width:100px;heigh:100px;">香蕉</div> 
   </body>

在这里插入图片描述

内部引入

 <style>    
     div{
          color:red;      
	  width:100px;  
	  height:100px;   
          }   
 </style>  
   </head>  
   <body> 
   <div>苹果</div> 
   </body>

外部引入

css选择器
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
选择器主要由有四大类：

基本选择器
组合选择器
属性选择器
伪元素选择器
基本选择器：
通配符:全部都被标注！
标签div：
div{
}只有对应的div才被标注

id选择器：

class：没有唯一性性

**css原理**

1.优先原理：后解析的内容会覆盖掉之前的内容
2.继承原则：嵌套里面的标签拥有外部标签的某些样式；子元素可以继承父元素的属性。
优先原则：-》选择器
1.同一个选择器：从上往下执行。
效果如下

3.不同类型的选择器：优先级
先解析低优先级；
div<class<id
原理同上

4.外部样式内部样式合并之后再一起解析
先外部样式再内部。
其他原理同上。
5.内联样式：外部和内部解析完之后再解析内联。
6.加了important字段的最后执行。
继承原则

1.文字文本样式可被继承

       div.txt{
        color:red;
        }
        <body>  
         <div class="txt">
          苹果
      <p> 香蕉   </p>
      </div>
     </body>

其中苹果和香蕉属性相同。

2.块级元素宽度不被设置时则会继承父级元素的宽，高由内容决定。
组合选择器
把基本选择器通过特殊字符串在一起
分组选择器
用逗号隔开：div,p 代表两个选择器内容共同
嵌套选择器
用空格隔开：div p 嵌套在div里的p才能生效
子选择器
div>p 必须是上一级的div才能生效。
相邻选择器；同级别的
div+p
属性选择器

在这里插入图片描述
css背景
CSS 属性定义背景效果:

background-color属性定义了元素的背景颜色.
background-image属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示
background-repeat：
background-repeat:repeat-x;水平方向平铺
background-repeat:repeat-y;垂直方向平铺
background-repeat:no-repeat;不平铺
background-attachment：
scroll
背景图片随页面的其余部分滚动。这是默认
fixed
背景图像是固定的
使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment
background-position

css字体
font
在一个声明中设置所有的字体属性

font-family
指定文本的字体系列

font-size
指定文本的字体大小

font-style
指定文本的字体样式

font-variant
以小型大写字体或者正常字体显示文本。

font-weight
指定字体的粗细。

css链接和列表
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
在这里插入图片描述
css盒子模型
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

css布局
在这里插入图片描述清除浮动在下一个div中添加
div{
clean :both;
}就可以将恢复浮动

css定位
position 属性的五个值：
static:HTML 元素的默认值，即没有定位,遵循正常的文档流对象。
relative:相对定位元素的定位是相对其正常位置。
fixed:元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
sticky:这个有点魔性，就不写了。。。