css学习随笔

1、css入门

1.1、css基本语法：

<style>    
    选择器{        
        声明1;
        声明2;
        声明3;
        ...
    }
</style>

1.2 、导入方式

行内样式：

<h1 style="color: #245921">标题1</h1>

内部样式：

<style>    
    h1{        
        color: #245921; 
    }
</style>

外部样式（两种方式）：

链接式 (常用)：

<link rel="stylesheet" href="css/style.css">

导入式：(css2.1版本特有的，不常用了)

<style>    
    @import url(css/style.css);
</style>

如果同时存在多个相同标签的样式，那么优先级遵循：就近原则，离元素近的优先。

提示：html和css一般是分开写的，所以可以通过link标签去引入css。

2、选择器

2.1、基本选择器

作用：选择页面上的某个或者某一类元素。

1. 标签选择器：

   选中全部指定的标签。

   <style>
       需要选中的标签{
           
       }
   </style>
   

2. class选择器：

   选中标签内属性为class同一类的元素。

   <style>
       .class名称{
   
       }
   </style>
     
   <h1 class="class名称"> </h1>
   

3. id选择器：

   选择唯一一个标签内定义id名的元素。

   <style>
           #id名称{
               
           }
       </style>
   <p id="id名称"> </p>
   

优先级： id选择器 > class选择器 > 标签选择器

2.2、层次选择器

1、后代选择器：（空格 ：所有下层）

选择元素1下层所有同层的元素2。

<style>
    元素1 元素2{

    }
</style>

2、子选择器：（ > ：只有下一层所有同层）

只选择元素1后面的一层所有同层元素2。

<style>
    元素1 > 元素2{

    }
</style>

3、相邻选择器（ + ：同一层的下一个元素）

元素1同层向下选择一个元素2。

<style>
    元素1 + 元素2{
        
    }
</style>

4、通用选择器（ ~ ：同层向下的所有同层元素）

选择元素1同层向下所有的同层元素2。

<style>
    元素1 ~ 元素2{
        
    }
</style>

2.3 结构伪类选择器

style代码块中一般在标签后带：都是伪类选择器。

<style>
        /*选择ul下的第一个li元素*/
        ul li:first-child{
        color: aqua;
        }

        /*选择ul下的最后一个li元素*/
        ul li:last-child{
        color: #d3c33c;
        }

        /*定位到父元素，并按照第n号选择标签，并且是指定同类型标签才有效果*/
        p:nth-child(2){
        color: chartreuse;
        }
        /*选择同层同类型元素的第n号元素*/
        p:nth-of-type(4){
        color: coral;
        }
</style>

2.4、 属性选择器

可以指定属性修改样式。

用法不唯一：

标签[属性] 可以指定全部元素。

标签[属性 = "全部标识符’] 可以指定的全部元素。

标签[属性 *= "标识符’]，则是指包含这个标识符的全部元素。

标签[属性 ^= 文本1]， 属性的内容以文本1开头的全部元素。

标签[属性 $= 文本2]， 属性的内容以文本2结尾的全部元素。

= 绝对等于

*= 通配等于

^= 以什么什么开头

$= 以什么什么结尾头

<style>
    标签[属性]{
        
    }
    
    标签[属性 = "指定标识符"]{
        
    }
    
    标签[属性 *= "指定标识符"]{
        
    }
    
    标签[属性 ^= 文本1] {
        
    }
    
    标签[属性 $= 文本2] {
        
    }
    
</style>

3、美化网页

3.1、字体样式

font-family : 字体样式;
font-size： 字体大小;
font-weight: 字体的粗细;
font-height: 字体的高度;

整体可以写为:
font: (斜体oblique) 字体粗细 字体大小 字体样式 ;

3.2、文本样式

1.颜色

color: RGB，RGBA，单词;

2.文本对齐方式

text-align: 居右，左对齐。右对齐...;

3.字体缩进

text-indent: 缩进长度;

5.块元素的高度

height: 高度;

4.行高

line-height: 高度;

当块高度和行高高度一致时，可以达到上下居中显示的效果。 line-height = height

6.字体背景 :

background：RGB，RGBA，单词;

7.字体的装饰

text-decoration: 值;

overline：上划线

underline ：下划线

line-through：中划线

如果需要给 a链接标签去下划线直接将text-decoration的值设置位none。

8.文本图片对齐

参照物1,参照物2{
        vertical-align: middle;   /*和图片上下居中对齐*/
}

使用前：

使用后:

3.3、超链接伪类属性

a : hover 鼠标悬浮颜色

a ; active 鼠标按下去变色

a : link 链接激活前的颜色

a : visited 链接激活后的颜色

一般会写出这两个：

a{
    text-decoration: none;		/*去下划线*/
    color: #000000;				/*a标签的颜色变为黑色*/
}
a:hover{
    color: orange;		/*悬停颜色*/
}

3.4、阴影 text-shadow

阴影的坐标

目标 {
	text-shadow: 5px 5px 5px #FF0000;
}

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

3.5、列表样式 list-style

列表的样式的一些属性：

ul li{
    list-style: 值;
    /*
    	none 去掉原点
    	circle 空心圆
    	decimal 有序数字
    	square 实心正方形
    */
}

3.6、背景

背景

background: 颜色 ;
/*
	属性参数有： 颜色 图片路径 x位置 y位置 平铺方式;
*/

背景图片

background-image: url("");

平铺方式：

background-repeat: repeat ;		
/*
	默认 repeat
	水平平铺 repeat-x
	垂直平铺 repeat-y
	不平铺 no-repeat
*/

背景图片定位（x，y）：

background-position: x y;

3.7、渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

径向渐变（Radial Gradients）- 由它们的中心定义

background-image: linear-gradient(#e66465, #9198e5);
background-image: radial-gradient(red 5%, yellow 15%, green 60%);

可以去https://www.grabient.com 直接调试完，再复制代码去用。

4、盒子模型

4.1、盒子模型的结构：

分为外边距，边框，内边距，和内容的像素。

margin：外边距

margin: 0;			/*上下左右全部为0*/
margin: 0 1px;		/*上下为0  左右为1*/
margin: 0 1px 2px 3px;	/*顺时针执行: 上0  右1  下2  左3 */

border：边框

border: 1px solid red;	/*粗细， 样式， 颜色*/
/* 
如果是分开是
    border-width, border-style， border-color
    style样式：实线solid，虚线 dashed
*/

padding：内边距

内边距和外边距设置一样

padding:0;

一个盒子得计算方式：

margin + border + padding + 内容宽度 = 所需对齐的内容

4.2、圆角边框

在有边框情况下设置圆角边框，设置方式和内外边距的设置一样，角角顺时针执行。

border-radius: 0;	/*四个角都为0*/
border-radius: 10px 20px;	/*左上右下10 右上左下20*/
border-radius: 1px 2px 3px 4px;  /*角角从左上开始顺时针执行*/

可以让一个方框类变成圆形，如果一个正方形图片为50px*50px大，那么我可以设置4个角都为25px，那这个图片就变成一个圆形图像了。

4.3、盒子阴影

一整个模型的阴影

box-shadow: 0px 0px 100px red;		/* 右偏移量 下偏移量 模糊像素 颜色*/

5、浮动

5.1、 行内、块元素和display

行元素：不独占一行，如 a标签，b标签…

行内元素属性的宽度和高度是无法发生改变的。

<span> 行内元素如果需要发生改变一般用span包起来 </span>

块元素：独占一行的元素，如 p标签， h1~h6标签…

块元素属性的高度和宽度是可以发生改变的。

<div> 块内元素如果需要发生改变一般用div包起来  </div>

display属性：

display: 值;
/*
当值 = 
		inline：将元素设置为行内元素。
	  	block：将元素设置内块元素。
		inline-block: 元素既是行内元素，也是块元素。保持块元素的特性，但是可以和别的元素写在一行
		none：直接把这个元素，或者元素块给干掉。
*/

5.2 、float属性

float元素浮动：

float: right; /*right向右浮动， left向左浮动*/

清除浮动：（保留浮动，变成块元素）

clear: 值;
/*
	left：清除左边的浮动
	right：清除右边的浮动
	both：两边都清除浮动
*/

5.3、浮动元素塌陷问题

四大解决方案：

1. 增加父级元素的高度

height: 1000px;

2. 放一个空的div标签

<div class="c"></div>

/*标准写法*/
.c{
    margin: 0;
    padding: 0;
    clear: both;
}

3. overflow 解决内容溢出问题

overflow: 值;
/*
	hiddn：如果内容超过范围，则隐藏超出范围
	scroll：超过范围部分可以用内联的滚动条浏览
*/

4. 父类添加一个伪类after（推荐）

   相当于第一种添加空div方法，但是避免了这个添加空标签的手段，而通过代码去直接实现。

#父类:after{
    content: '';    /*添加一个空内容*/
    display: block; /*将内容变成块元素*/
    clear: both;	/*清除两边的浮动*/
}

6、定位

6.1、相对定位 relative

相对于原有的位置，进行偏移，并且原有位置会保留。

position: relative;
top: 10px;		/*远离上面10px，其他方向也是这个意思*/
bottom: -20px	/*远离下边-20px，也就是向下移动20的意思*/
/*
	letf左，right右
*/

6.2、绝对定位 absolute

定位：基于xxx定位，

如果没有父级相对定位前提下，那就基于浏览器

有就定位于父级元素内，在父级块内移动。

position: absolute;
/*移动方式同relative*/
top: 10px;

6.3、固定定位 fixed

无论页面怎么滚动，我都固定在一个地方。

position: fixed;

6.4、层次设置 z-index

如果页面的某处有层次，那么我就可以用 z-index设置层次优先级

z-index: 默认为0，最大无限。

6.5、背景透明度 opacity

如果需要透明一下背景，则可以使用 opacity

opacity: 0;
opacity: 0.1~1;