前端入门-css

最新推荐文章于 2024-05-23 22:59:55 发布
最新推荐文章于 2024-05-23 22:59:55 发布
阅读量152 收藏 1
点赞数 1
分类专栏： 前端入门 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46274352/article/details/115673275
版权

1.什么是CSS?

层叠样式表（Cascading StyleSheet）,表现标准语言

包含字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动…

< style>标签可以编写css的代码,语法:

选择器{
	声明1;
	声明2;
	声明3;
}

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

<!--规范,<style>可以编写css代码,没有一个声明,最后使用分号结尾
语法:
    选择器{
	声明1;
	声明2;
	声明3;
}
-->
<style>
    h1{
        color: red;
    }

</style>

</head>
<body>

<h1>我是标题</h1>

</body>
</html>

建议使用这种方式

在这里插入图片描述

css的优势:

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

1.1css导入方式

行内样式

<h1 style="color: red">我是标题</h1>

内部样式

<style>    
    h1{        
        color: green;    
}</style>

外部样式

在单独的css文件中写的样式
h1{    
	color: blue;
}
在html文件中导入
<link rel="style" href="css/style.css">

优先级,依据就近原则: 行内样式 > 内部样式 > 外部样式

拓展:外部样式两种写法

  • 链接式
    属于html

    <!--外部样式-->
<link rel="style" href="css/style.css">

  • 导入式
    @import是CSS2.1特有

    <!--导入式-->
<style>
    @import "css/style.css";
</style>

2.选择器

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

2.1基本选择器

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

 <style>
     /*标签选择器,会选择页面上的所有的这个标签的元素*/
     h1{
         color: #187780;
     }
     p{
         font-size: 80px;
     }
</style>

2.类选择器 class: 选择所有class属性一致的标签,跨标签 .类名{}

<style>
    /*类选择器的格式: .class的名称{}
    好处:可以多个标签归类,是同一个class,可以复用
    */
    .zm{
        color: orange;
    }
    .zs{
        color: pink;
    }
</style>

<body>
    <h1 class="zm">111</h1>
    <h1 class="zs">222</h1>
</body>

3.id选择器: 全局唯一 #id名{}

 <style>
     /*id选择器
     #id名称{}    
     */
     #zm{
         color: deeppink;
     }
     .style1{
         color: #187780;
     }
     h1{
         color: orange;
     }
</style>
<body>
    <h1 id="az">111</h1>
    <h1 class="style1">222</h1>
    <h1 class="style1">333</h1>
    <h1>444</h1>
    <h1>555</h1>
</body>

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

2.2层次选择器

1.后代选择器: 在某个元素的后面

/*后代选择器*/
body p {
    background: red;
}

2.子选择器: 限定下级一代渲染,更里面的层级不渲染

/*子选择器*/
body>p{
    background: green;
}

3.向下选择器: 本身不渲染,只渲染一个向下相邻的同类型的,如果下一个是不同类型则不渲染

/*相邻选择器:只有一个,相邻(向下)*/
.style1 + p{
    backgroud: yellow;
}

4.通用选择器: 本身不渲染,渲染所有向下相邻的同类型的,如果下一个是不同类型会继续渲染

/*通用选择器*/
.zm ~ p{
   background: #187780;
}

2.3结构伪类选择器

/*ul的第一个元素*/
ul li:first-child{
    background: #187780;
}
/*ul的最后一个元素*/
ul li:last-child{
    background: orange;
}
/*选中p1 :定位到父元素,选择当前的第一个元素
选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效,第一个是其他元素就会被阻碍无法实现
以顺序为基础的划分
*/
p:nth-child(1){
    background: deeppink;
}
/*选中父元素下的 p元素的第一个,不受其他标签的影响
以类型为基础的划分
*/
p:nth-of-type(1){
    background: pink;
}

2.4属性选择器

id和class的结合应用

/*属性名 = 属性值(正则)
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
/*选中存在id属性的元素*/
a[id]{
    background:red;
}
/*选中id为first的元素*/
a[id=first]{
    background:green;
}
/*选中class包含links的元素*/
a[class*="links"]{
    background:yellow;
}
/*选中href中以http开头的元素*/
a[href^=http]{
    background:blue;
}
/*选中href中以jpg结尾的元素*/
a[href$=jpg]{
    background:pink;
}

3.美化网页元素

3.1为什么要美化页面

1.有效的传递页面信息

2.美化网页,页面漂亮,易于吸引用户

3.凸显页面主题

4.提高用户的体验

span标签:重点要突出的字,使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #test{
            font-size: 50px;
        }
    </style>
</head>
<body>
一起学习<span id="test">前端css</span>
</body>
</html>

3.2字体样式

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

3.3文本样式

1.颜色 color rgb rgba

2.文本对齐方式 text-align: center

3.首行缩进 text-indent: 2em

4.行高 line-height 单行文字上下居中:line-height = height

5.装饰 text-decoration

6.文本图片水平对齐 vertical-align: middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--颜色
    RGB 0~F
    RGBA  透明度A:0~1

    text-align:排版
    text-indent: 2em 段落首行缩进2个字符位
    height:行高
    line-height:块的高度
    当行高和块高一致,就可以上下居中
    -->
    <style>
        h1{
            color: rgba(33,222,111,0.6);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p2{
            background: #187780;
            height: 20px;
            line-height: 20px;
        }
        /*上划线*/
        .l1{
            text-decoration: overline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*下划线*/
        .l3{
            text-decoration: underline;
        }
        /*超链接去下划线*/
        a{
            text-decoration: none;
        }
        /*文本图片水平对齐*/
        img,span{
            vertical-align: middle;
        }
    </style>

</head>
<body>
<p class="l1">111</p>
<p class="l2">222</p>
<p class="l3">333</p>

<a href="">123</a>

<h1>层叠样式表(英文全称：Cascading Style Sheets)</h1>
<p class="p1">
    是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
</p>

<p class="p2">
    CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
</p>

<p>
    <img src="1.png">
    <span>123456789</span>
</p>
</body>
</html>

3.4阴影

/*text-shadow:  阴影颜色,水平偏移,垂直偏移,阴影半径*/
#price{
    text-shadow: mediumvioletred 5px 0px 5px;
}

3.5超链接伪类

一般情况下: 只使用 a : hover

/*未访问的链接*/
a:link{
    color: black;
}
/*已访问的链接*/
a:visited{
    color: aqua;
}
/*鼠标悬停在链接上(重要)*/
a:hover{
    color: #187780;
}
/*点击未释放中*/
a:active{
    color: deeppink;
}

3.6列表

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: dimgray;
}
a:hover{
    color: hotpink;
    text-decoration: underline;
}

3.7背景

背景颜色

背景图片

<style>
div{
    width: 1000px;
    height: 700px;
    border: 1px solid red;
    background-image: url("../4.超链接伪类/image/a.jpeg");
    /* 默认是全部平铺 repeat*/
}
.div1{
    background-repeat: repeat-x;
}
.div2{
    background-repeat: repeat-y;
}
.div3{
    background-repeat: no-repeat;
}
</style>

3.8渐变

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

4.盒子模型

4.1什么是盒子模型

  1. margin：外边距
  2. padding：内边距
  3. border：边框

4.2边框

border：粗细 样式 颜色

  1. 边框的粗细
  2. 边框的样式
  3. 边框的颜色
<style>
        #box{
            width: 300px;
            border: 1px solid blue;
        }
        h2{
            font-size: 20px;
            background-color: #ffdefc;
            line-height: 30px;
            color: mediumvioletred;
        }
        form{
            background: #bbe7ff;
        }
        div:nth-of-type(1)>input{
            border: 3px solid black;
        }
        div:nth-of-type(2)>input{
            border: 3px dashed pink;
        }
    </style>

4.3外边距

margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下

margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
/*例1：居中*/
margin:0 auto /*auto表示左右自动*/
/*例2：*/
margin:4px/*表示上、右、下、左都为4px*/
/*例3*/
margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/

盒子的计算方式：
margin+border+padding+内容的大小

body总有一个默认的外边距 margin:0
常见操作：初始化

margin:0;
padding:0;
text-decoration:none;

4.4圆角边框

border-radius有四个参数（顺时针），左上开始
圆圈：圆角=半径

/*圆角*/
<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid pink;
        border-radius: 50px ;
    }
</style>

4.5盒子阴影

<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid pink;
        box-shadow:10px 10px 100px greenyellow;
    }
</style>

5.浮动

5.1标准文档流

块级元素：独占一行 h1~h6 、p、div、 列表…
行内元素：不独占一行 span、a、img、strong

注意:行内元素可以包含在块级元素中，反之则不可以。

5.2、display（重要）

  1. block：块元素

  2. inline：行内元素

  3. inline-block：行块元素

这也是一种实现行内元素排列的方式，但是我们很多情况用float

  1. none:消失
<!--
block 块元素
inline 行内元素
inline-block 行块元素
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid deepskyblue;
        display: inline-block;
    }
    span{
        width: 100px;
        height: 100px;
        border: 1px solid deepskyblue;
        display: inline-block;
    }
</style>

5.3float

浮动是一个让元素拥有块级元素的特性但却可以在一排显示的属性，无论该元素是否是块级元素还是行内元素
float: 将元素设置为浮动元素

left: 从左到右排列
right: 从右到左排列
none: 无浮动

.layer01{
    display:inline-block;
    float:right;
}
.layer02{
    display:inline-block;
    float:left;
}

5.4overflow及父级边框塌陷问题

clear：
right：右侧不允许有浮动元素
left：左侧不允许有浮动元素
both：两侧不允许有浮动元素
none：不限制浮动

解决塌陷问题方案：
方案一：增加父级元素的高度；

#father{
    border:1px #000 solid;
    height:800px;
}

方案二：增加一个空的div标签，清除浮动

<div class = "clear"></div>
<style>
	.clear{
		clear:both;
		margin:0;
		padding:0;
	}
</style>

方案三：在父级元素中增加一个overflow：hidden

overflow:hidden/*隐藏*/
overflow：scoll/*滚动*/

方案四：父类添加一个伪类:after

#father:after{
	content:'';
	display:block;
	clear:both;
}

小结:

  1. 浮动元素增加空div
    简单,代码尽量避免空div
  2. 设置父元素的高度
    简单,元素假设没有了固定的高度,就会超出
  3. overflow
    简单,下拉的一些场景避免使用
  4. 父类添加一个伪类:after(推荐)
    写法稍微复杂,但是没有副作用,推荐使用

5.5对比

  • display

    方向不可以控制

  • float

    浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题

6定位

6.1相对定位

相对定位：positon：relstive；
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留

top:-20px;
left:20px;
bottom:-10px;
right:20px;

6.2绝对定位

绝对定位：positon：absolute；

定位：基于xxx定位，上下左右~
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
总结：相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它脱离普通文档流，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;

        }
        #second{
            background-color: green;
            border: 1px dashed #0ece4f;
            position: absolute;
            right:30px;
            top:30px
        }
        #third{
            background-color: red;
            border: 1px dashed #ff1b87;
        }
    </style>
</head>
<body>
<div id = "father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

6.3固定定位

固定定位: position: fixed

脱离普通文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        /*绝对定位：没有相对的父级元素，所以相对于浏览器*/
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        /*固定定位:fixed*/
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6.4z-index

z-index,设置元素的层级,不带单位的数值

默认是0，最高无限~999

默认情况下html结构中，顺序越后元素的层级越高

通过层级属性的设置值越大层级越高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/stlye.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="./image/a.jpeg" alt=""></li>
        <li class="tipText">java书籍</li>
        <li class="tipBG"></li>
        <li>时间:2020-02-02</li>
    </ul>
</div>
</body>
</html>

#content{
    width: 300px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBG{
    position: absolute;
    width: 300px;
    height: 20px;
    top: 296px;
}
.tipText{
    color: deeppink;
    /*层级设置*/
    /*z-index: 999;*/
}
.tipBG{
    background: #bbe7f0;
    /*也可以使用背景透明度实现部分需求*/
    opacity: 0.5;
}
318万岁
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端-CSS入门.pdf
08-21
前端-CSS入门.pdf
前端web入门-CSS-day06-标准流和flex布局
来自计科大一萌新的编程记录本
06-17 1433
学习目标：1. 了解标准流概念 2.学会使用flex布局
头歌-CSS入门
somewon的博客
03-06 7299
四川师范大学 CSS 头歌
前端入门css3-----渐变
m0_61656944的博客
01-25 170
可以多种颜色：
CSS入门学习笔记+案例
热门推荐
itboy
06-16 29万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
前端基础入门之css less
LoveSummer
06-20 7918
是一门的预处理语言在中搜索，点击html 代码使用快捷方式创建代码生成代码 less 代码创建文件，编写代码 插件会帮助我们在所在目录下面生成一个相同名称的文件查看生成的代码 我们直接在 HTML 中引入生成的 运行代码，查看效果中的单行注释，注释中的内容不会被解析到中中的注释，内容会被解析到文件中 父子关系嵌套 在中，父子关系可以直接嵌套 对应的 变量 变量，在变量中可以存储一个任意的值并且我们可以在需要时，任意的修改变量中的值变量的语法： 生成的代码 注意：在中使用语法需要用引号包裹 生成的代码 拼
前端入门css3-----圆角边框
m0_61656944的博客
01-20 695
前端入门css3-----字体引入
m0_61656944的博客
01-20 497
前端学习之CSS
weixin_44362089的博客
10-20 2699
前段端学习之CSS,层叠样式表，HTML，三种方式
uniapp快速入门系列（3）- CSS技巧与布局
赤兔码
10-09 2336
在uniapp中，我们使用CSS来设置页面的样式和布局。本章将介绍一些在uniapp中常用的CSS技巧和布局实例，帮助你更好地美化页面和实现各种布局效果。以上是uniapp中常用的CSS技巧和布局实例，以及如何使用CSS动画和过渡效果增强页面的动态效果。可以直接编写常规的CSS样式，也可以使用预编译的CSS工具，比如Sass或Less。除了使用CSS动画，uniapp还支持使用过渡效果为元素添加平滑的过渡效果。弹性布局和自适应高度的方式。的动画，持续时间为2秒，使用线性变换方式，并无限循环播放动画。
前端入门css3-----弹性盒
m0_61656944的博客
01-20 458
在大盒子里设置为弹性盒，那么 在小盒子里直接设置margin: auto;就可以水平垂直居中了 注意：只有一个元素的时候！
前端入门html和css布局
07-20
前端入门html和css布局的资料,适合刚入前端的小白
前端css学习入门资源
02-24
前端css学习入门资源
前端项目-shoelace-css.zip
09-03
前端项目-shoelace-css,回到基本的CSS入门工具包。
前端入门教程-奥力给(HTML-CSS-JS)
07-01
之前挂了个付费课程，发现有些人看，但是没有人出钱买，于是想了想，现在打算去创业了，目前也不差那几百的车票钱，那就做个公益吧，这可能也是我最后一堂课吧
移动端/PC端布局-flex布局
微木
05-22 120
flex布局详解
CSS常用的两种定位方式
代码有点萌的博客
05-23 359
relative定位是相对自身原始位置进行偏移。absolute定位是相对于最近的已定位（relativeabsolutefixedsticky）祖先元素进行偏移。如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）进行定位。相对自身原始位置进行偏移。元素仍占据原始位置的空间。用于微调元素位置，不会影响其他元素的布局。脱离文档流，相对于最近的已定位祖先元素进行定位。不占据空间，其他元素会忽略它的位置。用于精确定位元素，通常与relative定位的祖先元素配合使用。
Web开发——HTML&CSS
一切皆是定数的博客
05-20 423
HTML：HyperText Markup Language，超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言，HTML标签都是预定义好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。CSS：Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。以下就是html代码以及css样式搭配之后的显示效果。
SCSS基本使用
最新发布
mj256115的博客
05-23 409
SCSS（Sassy CSS）是一种 CSS 预处理器，它是 CSS 语言的一个扩展，增加了变量、嵌套规则、混合（mixins）、函数等功能，使得编写 CSS 更加高效和易于维护。SCSS 代码最终会被编译成标准的 CSS 代码。
入门学习CSS推荐那几本书
06-08
书中详细介绍了CSS的各种属性和用法，可以帮助读者快速入门CSS。 3. 《CSS世界》：这本书由张鑫旭编写，介绍了一些CSS的实用技巧和应用场景，适合初学者和有一定CSS基础的读者阅读。 4. 《精通CSS》（Mastering ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值