CSS

最新推荐文章于 2024-06-15 17:53:25 发布
最新推荐文章于 2024-06-15 17:53:25 发布
阅读量318 收藏
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/D19992730096/article/details/128187562
版权

CSS

CSS语法

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

CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入样式</title>

<!--内部样式-->
    <style>
        h1{
                color: antiquewhite;
        }
    </style>

<!--外部样式-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!--优先级:就近原则-->
<!--行内样式-->
   <h1 style="color: blue">标签</h1>
</body>
</html>

拓展：外部样式两种写法

  • 链接式
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
  • 链接式
<!--内部样式-->
<style>
        h1{
         @import url("style.css")
        }
    </style>

选择器

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

基本选择器

​ 不遵循就近原则：id选择器 > class选择器 > 标签选择器

  • 标签选择器 ：选择一类标签 标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>

  <style>
    /*标签选择器，会选择到页面上所有的这个标签元素*/
    h1{
      color: #fc1111;
    }
    p{
      font-size: 80px;/*字体大小*/
      color: #fc1111;
    }
  </style>
</head>
    
<body>

<h1>hello</h1>
<h1>hello</h1>
<p>hi</p>

</body>
</html>
  • class选择器： 选择所有class 属性一致的标签，跨标签 .类名{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Class选择器</title>

  <style>
    /*类选择器的格式  .class的名称{}
      好处： 可以多个标签归类，是同一个class 可以复用 */
    .hi{
      color: #ff30c8;
    }
    .hello{
      color: #62e0ff;
    }
  </style>  
</head>
    
<body>

<h1 class="hi">标题1</h1>
<h1 class="hello">标题2</h1>
<h1>标题3</h1>

</body>
</html>
  • id选择器：全局唯一 #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
  /*id选择器: id必须保证全局唯一！
     #id名称{}
  */
  <style>
    #hello{
      color: #62e0ff;
    }
    #ni{
      color: #ff30c8;
    }
  </style>
</head>

<body>

<h1 id="ni">标题1</h1>
<h1 id="hello"> 标题1 </h1>
<h1> 标题1 </h1>

</body>
</html>

层次选择器

  • 后代选择器
body p{ }
  • 子选择器
body>p{ }
  • 相邻选择器 : 只有一个 相邻(向下)
.active + p{ }
  • 通用选择器：当前选中的元素的向下的所有相邻元素
.active~p{ }

结构伪类选择器

/*ul的第一个子元素*/
ul li:frist-child{
   background: green;
}

/*ul的最后一个子元素*/
ul  li:last-child{
   background: red;
}

/* 选中 p1 : 定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！，顺序*/
p:nth-child(1){
   background: yellow;
}

/*选中父类元素，下的p元素的第二个，类型*/
P:nth-of-type(2){
   background: pink;
}

例题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>

<style>
    /*ul的第一个子元素*/
    ul li:first-child{
      background: #fc1111;
    }

    /*ul的最后一个子元素*/
    ul li:last-child{
      background: #62e0ff;
    }

    /* 选中 p1 : 定位到父元素，选择当前的第一个元素
     选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！，顺序*/
    p:nth-child(1){
      background: blue;
    }

    /*选中父类元素，下的p元素的第二个，类型*/
    p:nth-of-type(2){
      background: antiquewhite;
    }
</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>

属性选择器

  • 格式：a[]{}
  • 属性名 属性名=属性值(正则)
    = 绝对等于
    *= 包含
    ^= 以…这个开头
    $= 以…结尾
  • 例题
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>

</head>
<style>
    .demo a{
        float: left;
        display: block;
        height: 50px;
        width: 50px;
        border-radius: 10px;
        background: #62e0ff;
        text-align: center;
        color: bisque;
        text-decoration: none;
        margin-right: 5px;
        font: bold 20px/50px Arial;
    }
    /*属性名  属性名=属性值(正则)
    = 绝对等于
    *= 包含
    ^= 以..这个开头
    $=  以..结尾
    */
    /*存在id属性的元素
    a[id]{
        background: #fc1111;
    }*/
    a[id=first]{
        background: #fc1111;
    }

    /*class 中含有 links的元素 */
    a[class*=links]{
        background: yellow;
    }

    /*选中含有href中http开头的元素*/
    a[href^=http]{
        background: #62e0ff;
    }

    /*选中含有href中doc结尾的元素*/
    a[href$=doc]{
        background: #ff30c8;
    }
</style>
<body>

<p class="demo">

    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank"title="test">2</a>
    <a href="index/123.html" class="links item">3</a>
    <a href="index/123.png" class="links item">4</a>
    <a href="index/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="abc.doc" class="links item">8</a>
    <a href="/abc.pdf" class="links item">9</a>
    <a href="abcd.doc" class="links item">10</a>
</p>

</body>
</html>

美化网页元素

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

<span>重点要突出的字</span>

字体样式

font-family:    <!--字体 -->    
color:          <!--color:  字体颜色 -->
font-size:      <!-- 字体大小 -->
font-weight:    <!-- 字体粗细 -->

文本样式

color:       <!--颜色 -->
text-align:        <!--文本对齐方式 -->
text-indent: 2em;          <!--段落首行缩进 -->
line-height:       <!--行高 -->
text-decoration: underline;    <!--下划线 -->
text-decoration: overline;      <!--上划线 -->
text-decoration: line-through;  <!--中划线 -->
text-decoration: none;      <!--超链接去下划线 -->

超链接伪类 阴影

超链接伪类

a{  }   <!--默认的颜色 -->
a:hover{ } <!--鼠标悬浮的状态 (只需要记住：hover) -->
a:active{ } <!--鼠标按住未释放的状态 -->

阴影

text-shadow:red 10px 10px -9px;   <!--阴影颜色 水平偏移 垂直偏移 阴影半径 -->

列表

/* ul  li*/
/*
list-style:
   none 去掉原点
   circle 空心圆
   decimal 数字
   square 正方形
*/
/*ul{
    background: antiquewhite;
}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

背景

背景颜色

background:

背景图片

background-image:url("图片路径");
background-repeat: ;/*图片默认全部平铺 repeat;*/

渐变

background-color: ;
background-image:linear-gradient();

盒子模型

margin: 外边距 padding：内边距 border：边框

边框

boder: 粗细(width) 样式(style) 颜色(color);
/*注意：
  body总是有一个默认的外边距margin: 0;*/
/*常见操作：
h1,a,ui,li,body{
marrgin:0;
padding: 0;
text-decoration: none;
}
*/

内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边距</title>
<!--居中元素  margin: 0 auto;-->
  <style>
    #box{
      width: 300px;
      border: 1px solid red;
    }
  /*顺时针
  margin:0; 边距为0
  margin:0 1px;  上下  左右
  margin:0 1px 2px 3px;  上下左右
  */
    h2{
      font-size: 16px;
      background-color: #62e0ff;
      line-height: 25px;
      color: white;
      margin: 1px 2px 3px;
    }
    form{
      background: #62e0ff;
    }
    input{
      border: 1px solid black;
    }
    div{
      padding: 10px 2px;
    }
  </style>
</head>
<body>

<div id="box">
  <h2>会员登录</h2>
  <form action="#">
    <div>
      <spean>用户名:</spean>
      <input type="text">
    </div>
    <div>
      <spean>密码:</spean>
      <input type="text">
    </div>
    <div>
      <spean>邮箱:</spean>
      <input type="text">
    </div>
  </form>
</div>
</body>
</html>

圆角边框

<style>
div{
    width:  ;
    height:  ;
    border:  ;
    border-shadow:  ;  /*圆角 左上和右下  右上和坐下*/
    }
</style>

盒子阴影

<style>
 div{
    box-shadow:  ;  
    }
</style>

浮动

标准文档流

  • 块元素 独占一行
  h1~h6  p div  列表...
  • 行内元素 不独占一行
spean  a  img strong...

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

<!--block 块元素 
   inline 行内元素
   inline-block   是块元素，但是可以内联，在一行
   none  块元素消失-->
       dispaly: block  ;

float

<!--left 左浮动   right 右浮动-->
float: ;

父级边框塌陷的问题

  • clear
/*clear: right;  右侧不允许有浮动元素
clear: left;  左侧不允许有浮动元素
clear: both;  两侧不允许有浮动元素
clear: none; */
  • 解决方案
  1. 增加父级元素高度
# father{
    border:1px  #000 solid;
    height: 800px;
}
  1. 增加一个空的div标签，清除浮动
<div class="clear"></div>

.class{
clear: both;
margin: 0;
padding: 0;
}
  1. overflow
在父级元素中增加一个  overflow: hidden;
  1. 父类添加一个 ：after
#fater:after{
    content:'';
    dispaly: block;
    clean: both;
}

小结

​ 1.浮动元素后面增加空div （代码中尽量避免空div）

​ 2.设置父类元素的高度 （元素假设有了高度，就会被限制）

​ 3.overflow （下拉的一些场景避免使用）

​ 4.父类添加一个伪类 :after (常使用)

定位

相对定位

/*相对于原来的位置，进行指定偏移,相对应的位置仍在标准文档流中！原来的位置会被保留*/
position: relative;/*相对定位 上下左右*/
top: -20px；
bottom: -10px;
left: 20px;
right: 20px;

练习：方块定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方块定位</title>
    <style>
     #box{
         width: 300px;
         height: 300px;
         border: 2px solid red;
     }
     a{
         width: 100px;
         height: 100px;
         text-decoration: none;
         background: pink;
         line-height: 100px;
         text-align: center;
         color: white;
         display: block;
     }
     a:hover{
         background: #e12142;
     }
     .a2,.a4{
         position: relative;
         left: 200px;
         top: -100px;
     }
     .a5{
         position: relative;
         left: 100px;
         top: -300px;
     }
    </style>
</head>
<body>
<div id="box">
    <a href="#" class="a1">链接1</a>
    <a href="#" class="a2">链接2</a>
    <a href="#" class="a3">链接3</a>
    <a href="#" class="a4">链接4</a>
    <a href="#" class="a5">链接5</a>
</div>
</body>
</html>

绝对定位

/*注意：
  1.没有父级元素定位大的前提下,相对于浏览器定位
  2.假设父级元素存在定位，我们通常相对于父级元素进行偏移
  3.在父级元素范围内移动
    相对于父级或浏览器的位置，进行指定偏移，绝对定位后，不在标准文档中！原来的位置不会被保留
*/
position: absolute;/*绝对定位*/
top: -20px；
bottom: -10px;
left: 20px;
right: 20px;

固定定位

position: fixed;/*固定定位*/

z-index

z-index:0; /*层级 默认为0 最高无线*/
opacity: 1; /*背景透明度*/
松下的蘑菇
关注
bootstrap.css
01-27
bootstrap的css文件
cssgrid
03-30
cssgrid
CSS钢琴
03-02
CSS钢琴
main.css:用于开发HTML5 Boilerplate CSS文件main.css的存储库
04-13
使用安装： npm install main.css并从生成的node_modules/main.css/dist文件夹中node_modules/main.css/dist所需的内容用安装： yarn add main.css并从生成的node_modules/main.css/dist文件夹中node
CSS中背景断裂和精灵图的关系，以及4种解决方式
Keep trying, keep going
06-11 279
是指在使用背景图片时，由于背景图片的尺寸不足以覆盖整个元素区域，导致背景在某个方向上出现中断、不连续的现象。总之，要避免背景断裂问题，我们需要确保背景图片具有足够的尺寸以适应不同的设备和屏幕尺寸，并可以通过预留足够的背景空间、使用背景重复、CSS 渐变和矢量图形等方法来实现。：在设计精灵图时，确保每个背景区域有足够的宽度和高度，以适应不同设备和屏幕尺寸。如果精灵图中的某个背景区域不够宽或高，当元素尺寸变大时，背景图片可能无法完全覆盖元素区域，导致背景断裂。属性来实现背景的平铺，从而避免背景断裂。
HTML基础标签解析：H1-H6、DIV与P的正确使用方法
一起coding，一起嗨。
06-15 260
HTML基础标签解析：H1-H6、DIV与P的正确使用方法
HTML实现进度条/加载框模版
joe_g12345的博客
06-09 638
【代码】HTML实现进度条/加载框模版。
css display:grid布局，实现任意行、列合并后展示，自适应大小屏幕
qq_43053533的博客
06-12 355
此时会生成如图1所示的42个格子，让用户去勾选格子合并，合并逻辑后端完成。现有6X7列的一个布局，如下图所示。首先循环出42个格子，js代码。
如何判断 是否 需要 CSS 中的媒体查询
Keep trying, keep going
06-10 1372
使用现代的布局技术：如果你正在使用 Flex 布局或 Grid 布局，这些布局技术本身就具有很强的自适应能力，可能无需或只需很少的媒体查询就能实现响应式布局。设计非响应式的网站：如果你正在设计一个固定宽度的网站，而且不打算让它在不同的设备和屏幕尺寸上有不同的表现，那么你可能不需要使用媒体查询。内容简单的页面：如果你正在设计一个内容非常简单的页面，例如一个只包含少量文本和图片的静态页面，那么你可能不需要使用媒体查询。响应式布局：当设备的屏幕尺寸变化时，我们可以使用媒体查询来调整布局，以适应不同的屏幕尺寸。
uniapp使用css实现瀑布流
qq_45623072的博客
06-12 734
title:"大佬点的黑桃全家桶，今晚不醉不归，大干下一场，大家一起来!//当属性值为3，表示超出3行隐。title:"哈哈哈，好可爱的小女孩,打不过...",title:"两个月的布偶猫怎有这么小吗?title:"落日好美，你喜欢吗？title:"这样的礼物你喜欢吗?title:"这样的礼物你喜欢吗?author:"不懂的茄子",author:"椰子哦",author:"快乐样",author:"奈奈酱",author:"椰子哦",
CSS中哪些属性可以继承？
tianxianghuiwei的博客
06-12 346
*空自处理方式*/font-size:inherit;/* 字体大小 */font-weight:inherit;/* 鼠标样式 */color:inherit;在某些情况下需要加注释的属性 *//*文本对齐方式 */可以继承的属性 */
Vue2基础：.sync修饰符的使用，认识，作用，本质案例演示，实现父子之间的通信。
我就知道你会来，我们一起进步吧！
06-10 291
.sync修饰符的使用，认识，作用，本质案例演示，实现父子之间的通信。
Html_Css问答集(5)
白话魔法师
06-14 739
html与css学习中的一些疑问，问答中轻松获取知识。
前端学习CSS之神奇的块浮动
谜语人的博客
06-11 529
在盒子模型的基础上就可以对网页进行设计不知道盒子模型的可以看前面关于盒子模型的内容而普通的网页设计具有一定的原始规律,这个原始规律就是文档流。
背景渐变动画登录页
南北极之间
06-11 168
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
CSS期末复习速览（一）
最新发布
2301_80369371的博客
06-15 203
14.line-height设置行间距，行间距由三部分组成：上间距，文本高度，下间距，例如行间距为26px，如果文本大小为16px，那么上下间距为（26-16）/2=5px，主要用途：让行间距等于盒子的高度，实现文字在当前盒子内垂直居中。18.链接伪类选择器，四种：a：link（选择所有未被访问的链接），a：visited（选择所有已经被访问过的链接），a：hover（选择鼠标指针位于其上的链接），a：active（选择鼠标按下未弹起的链接）17.并集选择器，格式：标签1，标签2……}，代表选择多个标签。
css的应用
2302_77588101的博客
06-15 253
css是一种样式表语言,为html标签修饰定义外观,分工不同。
显著提高iOS应用中Web页面的加载速度 - 提前下载页面的关键资源（如JavaScript、CSS和图像）
侯仕奇的博客
06-15 296
手动下载并缓存资源是一种有效的方式，可以确保在需要时资源已经在本地存储，这样可以显著提高加载速度。
css
06-02
CSS（Cascading Style Sheets）是一种用于描述网页样式和排版的语言。通过 CSS，我们可以将网页内容和样式分离开来，从而使得网页的结构和样式更加清晰易于维护。 CSS 由三个部分组成： 1. 选择器（Selector）：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值