css学习笔记1

最新推荐文章于 2022-10-25 16:34:21 发布

欢乐的每一天

最新推荐文章于 2022-10-25 16:34:21 发布

阅读量125

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/a3026836480/article/details/108625181

版权

笔记专栏收录该内容

37 篇文章 1 订阅

订阅专栏

1 什么是CSS

如何学习？

CSS是什么
CSS怎么用(快速入门)
CSS选择器(重点+难点)
美化网页(文字，阴影，超链接，列表，渐变)
盒子模型
浮动
定位
网页动画(特效效果)

1.1 什么是CSS

Cascading Style Sheep层叠级联样式表
CSS：表现(美化网页)
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…

1.2 发展史

CSS1.0
CSS2.0 DIV(块)+CSS，HTML与CSS分离的思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范<style> 可以编写css的代码，每一个声明最好使用分号结尾
    语法：
    选择器{
    声明1;
    声明2;
    声明3;
    }-->
    <!--方式1-->
    <style>
        h1{
            color: aqua;
        }
    </style>
    <!--方式2-->
    <link ref="stylesheet" href="style.css">
</head>
<body>
<h1>test</h1>
</body>
</html>

h1{
    color: aqua;
}

css的优势
1、内容和表现分离
2、网页结构表现统一，可以实现复用
3、样式十分的丰富
4、建议使用独立于HTML的css文件
5、利用SEO，容易被搜索引擎收录

1.4 CSS的3中导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: darkgray;
        }
    </style>
    <link ref="stylesheet" href="style.css">
</head>
<body>
<!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: brown">test</h1>
</body>
</html>

/*外部样式*/
h1{
    color: hotpink;
}

优先级：行内样式>内部样式>外部样式
扩展：外部样式两种写法
链接式

<!--外部样式-->
<link ref="stylesheet" href="style.css">

导入式

<style>
@import "style.css";
</style>

2 选择器

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

2.1 基本选择器

1、标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器会选择到这个页面上所有的这个标签的元素*/
        h1{
            color: aqua;
            background: brown;
        }
    </style>
</head>
<body>
<h1>高等数学</h1>
<h1>大学英语</h1>
</body>
</html>

2、类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式 .class的名称{}
        好处：可以多个标签归类，是同一个class*/
        .name{
            color: blue;
        }
    </style>
</head>
<body>
<h1 class="name">小明</h1>
<h1>男</h1>
</body>
</html>

3、Id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*id选择器：id必须保证全局唯一
    #id名称{}
    优先级：不遵循就近原则，固定的
    id选择器>class选择器>标签选择器*/
    #desc{
        color: darkturquoise;
    }
</style>
<body>
<h1 id="desc">盼望着，盼望着，东风来了</h1>
</body>
</html>

2.2 层次选择器

1、后代选择器：在某个元素后面

body h1{
        background: brown;
}

2、子选择器，一代

body>h1{
    background: brown;
}

3、相邻兄弟选择器，平级，只有一个，相邻向下

.desc+h1{
        color: blue;
}

4、通用选择器（通用兄弟选择器），当前选择元素，向下所有兄弟元素

    .desc~h1{
        color: blue;
}

2.3结构伪类选择器

/*ul第一个子元素*/
    ul li:first-child{
        color: darkturquoise;
    }
    /*ul第一个子元素*/
    ul li:last-child{
        color: darkturquoise;
    }
    /*指定每个 p 元素匹配的父元素中第 2 个子元素的背景色*/
    p:nth-child(1){
        color: antiquewhite;
    }
    /*指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色*/
    p:nth-of-type(2)
    {
        color: blueviolet;
    }

2.4属性选择器(常用)

id+class结合

把包含标题（title）的所有元素变为红色
*[title] {color:red;}
只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}
将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
a[href][title] {color:red;}
class 属性中包含 important 的元素
p[class~="important"] {color: red;}

类型	描述
[abc^=“def”]	选择 abc 属性值以 “def” 开头的所有元素
[abc$=“def”]	选择 abc 属性值以 “def” 结尾的所有元素
[abc*=“def”]	选择 abc 属性值中包含子串 “def” 的所有元素

欢乐的每一天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习笔记1

1 什么是CSS如何学习？CSS是什么CSS怎么用(快速入门)CSS选择器(重点+难点)美化网页(文字，阴影，超链接，列表，渐变)盒子模型浮动定位网页动画(特效效果)1.1 什么是CSSCascading Style Sheep层叠级联样式表CSS：表现(美化网页)字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…1.2 发展史CSS1.0CSS2.0 DIV(块)+CSS，HTML与CSS分离的思想，网页变得简单，SEOCSS2.1 浮动，定位CSS3.0
复制链接

扫一扫