CSS基础学习

最新推荐文章于 2022-11-17 21:11:47 发布

小城小人物

最新推荐文章于 2022-11-17 21:11:47 发布

阅读量74

点赞数

分类专栏：笔记文章标签： css html css3

本文链接：https://blog.csdn.net/qq_42944538/article/details/121053348

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的基础知识，包括CSS的定义、发展历史、快速入门方法以及选择器的使用。通过实例展示了如何使用基本选择器、层次选择器和伪类选择器来操作网页元素。此外，还讲解了文本样式、阴影、超链接样式、边框、圆角以及定位等网页美化技巧，帮助读者快速掌握CSS并提升网页设计能力。

摘要由CSDN通过智能技术生成

CSS

如何学习css

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

一、什么是CSS

1.1 什么是css

Cascading Style Sheet 层叠级联样式表
CSS：（用来美化网页）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MP1051xv-1635584241124)(C:\Users\86150\AppData\Roaming\Typora\typora-user-images\image-20211029001323955.png)]

1.2 CSS发展史

CSS1.0
CSS2.0 DIV(块) + CSS 提出HTML 与 CSS结构分离的思想，使网页变得简单
CSS2.1 浮动、定位
CSS3.0 圆角、阴影、动画浏览器兼容性

练习格式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sxLBjVML-1635584241125)(C:\Users\86150\AppData\Roaming\Typora\typora-user-images\image-20211029002921323.png)]

1.3 快速入门

基本入门 Style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>

<!--规范,<style>  里面可以编写CSS的代码
语法：
   选择器{
   声明1;
   声明2;
   声明3;
   }
-->
    <style>
         h1{
             color: coral;
         }
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

CSS优势：

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

1.4 CSS的三种导入方式

行类样式
内部样式
外部样式

二、CSS选择器

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

2.1基本选择器

标签选择器

<!--标签选择器会选择页面所有的标签-->
    <style>
        h1{ color: brown}
    </style>

类选择器 .class

<!--类选择器的格式  .class的名称{}
好处，可以多个标签归类，同是一个class
-->
    <style>
        .long{
            color: bisque;
        }
    </style>

id选择器

<!--id选择器  :  id必须保证全局唯一
    # ＋ id名称{}
-->
    <style>
        #hua{
            color: #e70d2e;
        }
    </style>

2.2层次选择器

后代选择器

<!--后代选择器-->
    <style>
body p{
    background: darkblue;
}
    </style>

子选择器

<!--子选择器-->
    <style>
        body>p{ background: aqua}
    </style>

相邻兄弟选择器

<!--相邻选择器-->
        <style>
            .active + p{ background: antiquewhite}
        </style>

通用选择器

<!--通用选择器  当前选择元素向下的同级元素-->
        <style>
            .active ~p { background: #e70d2e}
        </style>

2.3、结构伪类选择器

伪类

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*ul的第一个元素*/
            ul li:first-child{ background: #e70d2e}
            /*ul的最后一子元素*/
            ul li:last-child{ background: bisque}
            /*选择当前P元素的父级元素,选中父级元素的第一个,并且是当前元素才生效*/
            p:nth-child(1){ background: antiquewhite}
            /*选中父元素,下的p元素的第二个,类型*/
            p:nth-of-type(2){ background: coral}
        </style>
    </head>
    <body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
      <li>li1</li>
      <li>li2</li>
      <li>li3</li>
    </ul>

    </body>
    </html>

2.4、属性选择器

标签a[属性+值]{}

三、美化网页元素

1.有效的传递页面信息

2.美化网页，页面漂亮才能吸引用户

3.凸显页面的主题

4.提高用户的体验

3.1、span标签

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #titl1{ font-size: 50px}
    </style>
</head>
<body>
<p>
    欢迎学习<span id="titl1">java</span>
</p>
</body>
</html>

3.2、字体样式

<!--
font-family: 字体
font-size: 字体大小
font-weight:加粗
color 字体颜色
-->
  <style>
    body{
      font-family: 楷体;
    }
    h1{
      font-size: 50px;
    }
    .p1{font-weight: bold; color: coral}
  </style>

3.3、文本样式

颜色
文本对齐方式
首行缩进
行高
装饰

<!--
text-align: center; 排版居中
text-indent: 2em  首行缩进
height:行高
line - height: 行高
text-decoration :underline  中划线
-->

3.4、阴影

#pice{
    text-show:颜色、偏移位置。。。
}

3.5、超链接伪类

//鼠标悬停时的状态
a:hover{
    color:red;
    font-size:20px;
}

3.6、边框 border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1,ul,li,a,body{ margin: 0; padding: 0; text-decoration: none;}
        #box{ width: 300px; border: 1px solid red}
        h2{ font-size: 16px; background-color: aqua;line-height: 30px;margin: 0;color: white}
        form{ background: aqua}
        div:nth-of-type(1) input{ border: 3px solid black}
        div:nth-of-type(2) input{ border: 3px dashed #ff0073
        }
    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>姓名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div><div>
        <span>邮箱:</span>
        <input type="text">
    </div>
    </form>

</div>
</body>
</html>

3.7、圆角边框

#sec{ background: #e70d2e;width: 100px;height: 100px;border: 10px; border-radius: 50px 50px 50px 50px;}

3.8、相对定位 position:relative

相对于原来的位置，进行指定的偏移

position:relative
top:-20px;
letf:-20px;
bottom:-20px;
right:-20px

3.9、练习定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位练习</title>
    <style>
        #button{width: 300px;height: 300px;border: 2px solid #ff0073;padding:内边距 10px;}
        a{ width: 100px;height: 100px;text-decoration:去掉下滑线 none;background:背景颜色 #ff00fb;display:块元素block;line-height:文本高度 100px;text-align:文本居中 center;color: white;}
        a:hover{ background: #8484ec;}
        .l2,.l4{position: relative;left: 200px;top: -100px;}
        .l5{position: relative;top:-300px;left: 100px;相对定位}
    </style>
</head>
<body>
<div id="button">
   <div class="l1"><a href="Sti.png" >链接1</a></div>
    <div class="l2"><a href="Sti.png">链接2</a></div>
   <div class="l3"><a href="Sti.png">链接3</a></div>
    <div class="l4"><a href="Sti.png">链接4</a></div>
    <div class="l5"><a href="Sti.png">链接5</a></div>
</div>
</body>
</html>

小城小人物

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础学习

CSS如何学习cssCSS是什么CSS怎么用（快速入门）CSS选择器（重点 + 难点）美化网页（文字、阴影、超链接、列表、渐变）盒子模型浮动窗口定位网页动画（特效效果）一、什么是CSS1.1 什么是cssCascading Style Sheet 层叠级联样式表CSS：（用来美化网页）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MP1051xv-1635584241124)(C:\Users\86150\AppData\Roa
复制链接

扫一扫