首页 > 其他分享> 文章详细

css自学笔记（未完成）

2022-07-31 01:01:20 阅读：171 来源： 互联网

标签：color 标签元素笔记自学 font 选择器 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">

导入式

css2.1特有的

<style>
    @import url("css/style01.css")
</style>

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

2.选择器

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

2.1基本选择器

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

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

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

类选择器

格式：.class的名称{}

好处：可以将多个标签归类，是同一个class，可以复用

   <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的名称{}；

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什么是盒子模型

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9