Java旅程 Day12

最新推荐文章于 2024-08-08 11:48:45 发布

回憶逐漸延燒

最新推荐文章于 2024-08-08 11:48:45 发布

阅读量66

点赞数

文章标签： css html web

本文链接：https://blog.csdn.net/weixin_43858830/article/details/116722008

版权

今日学习

今天回头去学习前端有关CSS的内容，因为之前学过，现在大部分都是回顾和学一些不多的新内容。

CSS

什么是CSS：Cascading Style Sheet 层叠级联样式表
CSS发展史

CSS的文件创建规范

创建规范
规范：Style里可以编写CSS代码，每一个声明最好使用分号结尾
语法：
选择器{
声明1:
声明2:
声明3:
}

CSS的优势

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

CSS的三种导入方式：

直接写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--结论：
            优先级：就近原则
            样式语句离样式越近则生效
    -->
    <!--内部样式-->
    <style>
      h1{
          color: red;
      }
    </style>
</head>
<body>
<!--行内样式-->
<h1 style="color: aqua"></h1>
</body>
</html>

链接式：

<link rel="stylesheet" href="css/style.css">

导入式：

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

选择器（重点）

三种基本选择器

标签选择器

特点：选择一类标签
格式：

h1{
    color: aqua;
}

类选择器

特点：选择所有class属性一致的标签，可以跨标签，复用

.depth{
    color: blue;
}

ID选择器

特点：全局唯一

#sea{
    color: red;
}

基本选择器优先级

选择器优先级：不遵循优先原则
优先级：ID选择器>类选择器>标签选择器

高级选择器

后代选择器：

特点：在某个元素的后面所有的标签

body p{
  background-color: red;
}

在这里插入图片描述

子选择器

特点：某个元素后一代标签

body>p{
  background-color: red;
}

在这里插入图片描述

相邻兄弟选择器

特点：相邻向下的一个元素

.active + p{
    background-color: red;
}

在这里插入图片描述

通用兄弟选择器

特点：当前选中元素的向下的所有兄弟元素

.active~p{
  background-color: red;
}

在这里插入图片描述

结构伪类选择器

伪类：条件

<style>
  /*ul的第一个子元素*/
  ul li:first-child{
    background-color: red;
  }
  /*ul的最后一个子元素*/
  ul li:last-child{
    background-color: #9e5d5d;
  }
  /*选中p1:定位到父元素，选择第一个元素
  选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
  */
  p:nth-child(1){
    background-color: #1d1c1c;
  }
  /*选中p1:定位到父元素，选择第一个类型为p的元素
  */
  p:nth-of-type(1){
    background-color: #6bfa6b;
  }

在这里插入图片描述

属性选择器

id + class结合
使用正则表达式：

= 精准匹配
*= 选择所有
^= 选择开头
$= 选择结尾

a[href$=jpg]{
    background:yellow;
}

美化网页元素

为什么要美化网页：

1、有效的传递页面信息
2、美化网页，页面漂亮，才能吸引永华
3、凸显页面的主题
4、提高用户的体验

美化标签和属性

span标签

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

<span>我是字</span>

字体样式

font-family:; --字体，可以设置英文和中文的字体，用逗号隔开
font-size:10px; --字体大小
font-weight:;--字体粗细
color:;--字体颜色

统一设置：
<!--字体风格-->
<style>
    p{--oblique斜体 bolder斜体
      font:oblique bolder 50px "楷体";
    }
</style>

文本样式

RGB():颜色
RBGA(0,0,0,0.2)    --颜色+透明度
text-align:center;    --排版，居中
text-indent:2em;    --段落首行缩进
line-height:10em;    --设置每行行高和块的高度，如果行高和块的高度一致为居中
text-decoration:underline;    --下划线 a标签默认有下划线 需要设置为none去下划线
vertical-align:middle;    --图片文本水平对齐

在这里插入图片描述

超链接伪类

a:hover{}

列表

#nav{
    width: 350px;
    height: 350px;
}
.title{
    font-size: 30px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
}
/*
list-style: none;去掉圆点
circle空心圆
decimal数字有序列表
square正方形
*/
ul{
    background: #6c6868;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 20px;
    color: #000000;
}
a:hover{
    color: #e0bc3a;
    text-decoration: none;
    font-size: 30px;
}

背景

<style>
    div{
      width: 500px;
      height: 300px;
      border: 1px solid red;
      background-image: url("images/1.png");
      /*图片默认全部平铺  */
    }
    .div1{
      /*水平平铺*/
      background-repeat: repeat-x;
    }
    .div2{
      /*垂直平铺*/
      background-repeat: repeat-y;
    }
    .div3{
      /*不平铺*/
      background-repeat: no-repeat;
    }
</style>

渐变

推荐网站：https://www.grabient.com/
可以直接获取CSS代码
示例：

background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

盒子模型

在这里插入图片描述
margin：外边距
padding：内边距
border：边框

规范操作

/*body总有一个默认的外边距，习惯先设置为0，常见操作*/
  h1,ul,li,a,body{
    margin: 0;
  }

圆角边框示例

在这里插入图片描述

盒子阴影示例

在这里插入图片描述

标准文档流

在这里插入图片描述
块级元素：独占一行

h1~h6 p div 列表

行内元素不占独一行

span a img strong

行内元素可以被包含在块级元素中，反之则不行

display

是一种实现行内元素排列的方式，但是我们大多数情况都使用float

display:block 块元素
display:inline 行内元素
display:inline-block 是块元素，但是可以内联，在一行

float左右浮动

在这里插入图片描述

父级边框塌陷问题

clear

在这里插入图片描述

解决方案

在这里插入图片描述

小结：

1、浮动元素后面增加空div
    简单，尽量避免设置空div
2、设置父元素的高度
    简单，元素假设有了固定的高度，就会被限制
3、overflow
    简单，下拉的一些场景避免使用
4、父类添加一个伪类：after（推荐）
    写法稍微复杂一点，但是没有副作用，推荐使用

对比：

display:
     方向不可以控制
float
     浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

总结一哈

今天的学习感觉以了解为主，这些学起来很容易忘，看过一遍脑子里有印象差不多，之后忘了再看应该也能一眼想起来。
明天接着学，同时也要开始正式复习软考了。
在这里插入图片描述

回憶逐漸延燒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java旅程 Day12

今日学习今天回头去学习前端有关CSS的内容，因为之前学过，现在大部分都是回顾和学一些不多的新内容。CSS什么是CSS：Cascading Style Sheet 层叠级联样式表CSS的文件创建规范规范：Style里可以编写CSS代码，每一个声明最好使用分号结尾语法：选择器{声明1:声明2:声明3:}CSS的优势1、内容和表现分离2、网页结构表现统一，可以实现复用3、样式十分丰富4、建议使用独立于HTML的CSS文件5、利用SEO，容易被搜索引擎收录CSS的三种导入方式
复制链接

扫一扫