其他分享
首页 > 其他分享> > css自学笔记（未完成）

css自学笔记（未完成）

作者：互联网

如何学习

1.css是什么

2.css怎么用（快速入门）

3.css选择器（难点+重点）

4.美化网页（文字，阴影，超链接，列表，渐变...）

5.盒子模型

6.浮动

7.定位

8.网页动画（特效效果）

1.1什么是css

cascading style sheep 层叠级联样式表

css：表现（美化网页）

字体 颜色 边距 高度 图片 背景 定位

1.2 发展史

css1.0

css2.0 DIV块 +css，HTML与css结构分离的思想 利于SEO（搜索引擎优化）

css2.1 浮动 定位

css3.0 圆角吧 阴影 动画.... 浏览器兼容性

1.3快速入门

style（风格）

2.网页结构表现单一，可以实现重复利用

3.样式丰富

4.建议使用独立于html的css文件

5.利于SEO，容易被搜索引擎收录！

1.4css3中导入方式

<body>
<h1 style="color:red">周佳宜牛逼</h1>
</body>

行内样式：在标签元素中，编写一个style属性，编写样式即可

优先级：就近原则，行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    h1{
        color:green;
    }
</style>
<link rel="stylesheet" href="css/style01.css">

<h1>周佳宜牛逼</h1>
</body>
</html>

拓展：外部样式两种写法

实现网页跳转 meta 使这行代码不可见 

<meta http-equiv="refresh" content="3 ; url=http://www.baidu.com"/>
<link rel="stylesheet" href="css/style01.css">
<style>
    @import url("css/style01.css")
</style>

网页元素特别多的情况下，会先显示网页结构，然后渲染，链接式直接渲染

2.选择器

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

2.1基本选择器

1.标签选择器：选择一类标签

2.类选择器 class：选择所有的class属性一致的标签，跨标签.class{}

3.Id选择器：选择唯一的id属性的标签 #id{}

   <style>
        .jiayi{
            color:yellow;
            font-size: 40px;
            background: green;
            border-radius: 40px;
        }
        .zhanglei{
            font-family: 黑体;
            font-size: 40px;
        }
    </style>
</head>
<body>
<h1 class="zhanglei">张磊3</h1>
<h1 class="zhou">张磊2</h1>
<h1 class="jiayi">张磊1</h1>
</body>

id选择器：id必须保持全局唯一

    <style>
        #zhanglei{
            color: yellow;
        }
    </style>
</head>
<body>
<h1 id="zhanglei">标题1</h1>
<body>

id选择器>class选择器>标签选择器

2.2层次选择器

1.后代选择器：在某个元素后面 祖爷爷 爷爷 爸爸 我 结构：类 标签

body p{
    background: aqua;
}

2.子代选择器:只选择body后面p标签的 结构：类>标签

body>p{
backgound : yeelow;
}

3.相邻兄弟选择器：只选择相邻向下选择的 且只有一个 类： 类+标签

        #zzz + p {
            background:#ca2727;
            color:red;
        }

4.通用选择器：向下所有的同级选择

        #zzz~p{
            color: yellow;
        }

2.3结构伪类选择器

        ul li:last-child{
            color: aqua;
            text-align: center;
        }
        ul li:first-child{
            color: aqua;
            text-align: center;
        }
      /*  <!--选中p1：定位到当前元素的父元素，然后选择第一个元素 利用
            :nth-child（定位元素在第几个）
            如果定位的不是当前元素，则不显示{ }-->*/
        p:nth-child(2){
            color: aqua;
            text-align: center;
        }
        /*所有父元素下面的第二个p元素*/
        p:nth-of-type(2){
            color: red;
        }

光标变色
/*伪类选择器*/
        <style>
<!-- a:hover{
    backgound:break
}
        </style>
<body>
<a helf="">跳转超链接</a>
<body>-->*/

2.4属性选择器（常用）

标签+[判断元素]{ }

class+id结合

=绝对等于

*=包含

^=

$=最后含有

3.美化网页元素

3.1为什么要美化网页

1.有效传递页面信息

2.美化网页，页面好看才能吸引用户

3.凸显页面的主题

4.提高用户体验

span标签：重点要突出的字，使用span标签套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .qiangdiao{
            font-size: 24px;
            font-family: 黑体;
        }
    </style>
</head>
<body>
欢迎学习<span class="qiangdiao">java</span>
</body>
</html>

3.2字体样式

 

 color: red;<;
    /*颜色*/
    /*font:;  可以直接设置字体大小粗细*/
    font-family: "Arial Narrow",楷体;
    /*字体设置,可以中英文一起设置  逗号隔开*/
    font-size: 24px;
    /*字体大小*/
    font-weight: lighter;
    /*字体粗细*/
    font: oblique lighter 12px 楷体 ;
    /*字体风格*/

3.3文本样式

1.颜色：

单词

RGB：0-F ff0000(红色) 00ff00（绿色） 0000ff（蓝色）

RGBA： A：0-1（透明度）

 

2.文本的对齐方式

text align：排版

text align：center

 

3.首行缩进

text-indent：2em 首行缩进2字符

 

4.行高

height：200px（字体）

line-height：200px（行高）

当字体等于行高的时候，上下居中对齐

 

5.装饰text-decartion

3.4阴影

3.5超链接伪类

3.6列表

3.7背景

背景颜色：backgound color

北京图片 backgound-image

3.7.1渐变颜色

渐变网站：http;//www.grabient.com/

渐变代码：

deg清晰度 

background:linear-gradient(100deg, #21D4FD 0%,#B721FF 100%)

4.盒子模型

4.1什么是盒子模型

image-20220726003021869

margin：外边距

padding：内边距

border：边框

4.2边框

边框的粗细

边框的颜色

边框的大小

4.3内外边距

margin:0 auto 可以设置外边距居中 顺序 上右下左

要求：块元素，且块元素有固定的宽度

 

两个参数代表上右 下左 顺时针旋转

盒子的计算方式：

你这个元素到底多大：

margin+border+padding+内容宽度=元素大小

4.4圆角边框

顺时针顺序 四个边角就是一个 顺序是左上 右上 右下 左下

border-radius: 5px 5px ;

4.5阴影

盒子阴影

box-shadow

background-shadow 背景阴影

5.浮动

5.1标准文档流

块级元素：独占一行

h1-h6  div p li

行内元素：不独占一行

span a img strong...

行内元素可以被包含在块级元素之间，反之不可以。

 

5.2display

block：改变块元素

inline：改变成行内元素

none：取消

实现行内元素排列的方式，但是我们很多情况都使用float

  <style>
    div{
        width: 100px;
        height: 50px;
        border:1px solid black;
        display: inline-block;
    }
    span{
        width: 150px;
        height: 50px;
        border:1px solid black;
        display: inline-block;
        margin: 0;
    }
  </style>

5.3float

左右浮动：

float：left

float：right



5.4父级边框塌陷问题


clear：right右侧不允许有浮动元素，如果有自动排列到下一行


chear：left左侧不允许又浮动元素


chear：both两侧都不允许有浮动元素




解决方案：


1.增加父级元素的高度


 


2.增加一个父级的空div标签清除浮动，然后css文件；


.clear{
    clear：both;
    margin：0；
    padding：0；
}


 


3.overflow


在父级元素中增加一个overflow：hidden 隐藏


overflow:scroll添加滚动条


 


4.父类添加一个伪类：


#father:after{
    centent:"";
    display:block;
    chear:both;
}


小结：浮动元素后面加一个空的div，简单


弊端：空的div是不好的，尽量避免


设置父元素的高度，假设有了固定的高度，就会被限制


3.overflow：


简单，下拉的一些场景避免使用


4..在父类添加伪类


写法复杂，添加一个空内容，但是没有副作用，推荐使用。


标签：color,标签,元素,笔记,自学,font,选择器,css	

来源： https://www.cnblogs.com/1jiayi/p/16536271.html