前端——CSS

前端——CSS

目录

  • css简介

  • css基本选择器

  • css组合选择器

  • css属性选择器

  • css选择器——分组与嵌套

  • css选择器——伪类选择器

  • css选择器——伪元素选择器

  • css选择器优先级

  • css属性相关

    1.字体样式

    2.背景属性

    3.边框属性

    4.display属性（隐藏属性）

  • css——盒子模型

  • CSS——浮动布局

  • CSS——定位属性

  • CSS——z-index

  • CSS——练习

css简介

  • css介绍

    css（Cascading Style Sheet，层叠样式表)是增添HTML的样式，为了让其增添可读性

    当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）

  • css语法

    css样式由两部分组成：选择器和 声明，声明又分为 属性和属性值，每个声明之间用分号隔开

    语法结构：

    ​ 选择器

  • css的注释语法

    / * 注释内容 * /

  • css的编写方式

    1.head中style标签内部直接编写

    2.head中link标签引入外部css文件

    3.直接在标签内部通过style属性编写（不推荐，原因是因为不能更加直观的更改样式）

​

css基本选择器

选择器 表现形式 所表现的含义
标签选择器（div） div 查找所有的div标签 并将内部的文本颜色变为绿色
类选择器(.c1) .c1 查找所有class属性中含有c1的标签
并将内部的文本颜色变为红色
id选择器(#d1) #d1 查找id值是d1的标签 并将内部的文本颜色改为黄色
通用选择器(*) * 查找所有的标签 并将内部的文本颜色改为蓝色

​ 在类选择器中，样式的类名尽量不用数字开头（有的浏览器会认不出此选择器）

​ 标签中的class 属性如果有多个，需要用空格分隔，方便查看

组合选择器

  • 标签之间的关系

       <p1></p1>
    <div>
        <p2>
            <span></span>
        </p2>
    </div>
    <p3></p3>
    1. p2 和 span 标签都为div 标签的后代标签，其中div标签是p2的父代标签，而p2又为span的父代标签
    2. p1,div,p3由于是同一级别的，故而优先级是从上而下的，p1是div标签的兄弟标签，p3是div标签的弟弟标签

  • 常见的组合选择器

    举例

    <body>
    <div id="d1">div
        <span>div里面的span</span>
        <p>div里面的p
            <span>div里面的p里面的span</span>
        </p>
        <span>div里面的span</span>
    </div>
    <p>嘿嘿嘿</p>
    <span>div下面的span</span>
    <span>div下面的span</span>
</body>

    1. 查找div标签内部所有的span(后代)

      ​ 后代选择器: 两个选择器之间空格隔开 查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签

      #d1 span {
            color: blue;
        }

    2. 查找div标签内部所有的儿子span

      儿子选择器 : 两个选择器之间大于号隔开 查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签

       #d1>span {
            color: orange;
        }

    3. 查找div标签同级别下面紧挨着的一个span标签(弟弟)

      毗邻选择器: 同级别下紧挨着div标签下面的第一个标签

      #d1+span {
            color: red;
        }

    4. 查找div标签同级别下面所有的span标签(弟弟们)

      弟弟选择器：同级别下，div标签下面所有的标签

      #d1~span {
            color: blue;
        }

css属性选择器

所有的标签除了有自己默认的属性之外 还可以拥有自定义的任意属性

​ 默认属性：id class

​ 自定义属性 ：x=1 ,y=2

  • 自定义属性选择器展示

    举例：

    <input type="text" name="username">
<input type="text" name="password" id="d1">
<a href="" name="username">111</a>
<div name="username">div</div>
</body>

    1. 查找属性名含有name的标签

      [name] {
    background-color: red;
}

    2. 查找属性名含有name并且值是username的标签

      [name='username'] {
    background-color: orange;
}

    3. 查找input标签并且 属性名含有name值是username的

      input[name='username'] {
    background-color: aqua;
}

    前面的选择器可以是任意类型的 标签、id、class

  • 拓展

    在查找自定义属性名时，还可以用部分符号来查找更改其样式

    样式 查找的方位
    [属性名^="具体查找内容"] 查找所有属性名中以其内容为开头的元素
    [属性名$="具体查找内容"] 查找所有属性名中以其内容为结尾的元素
    [属性名*="具体查找内容"] 查找所有属性名中所有包含其查找内容的元素
    [属性名~="具体查找内容"] 查找所有属性名中有一个值为查找内容的元素

css 分组和嵌套

  • 分组

    多个元素的样式相同时，可以通过多个选择器之间使用逗号分隔的分组选择器统一设置元素样式

    div,p,span {
        color: red;
            }

    合并后的选择器彼此不干扰，也没有类型的限制

  • 嵌套

    多种选择器可以混合起来使用

    比如：.c1类内部所有p标签设置字体颜色为红色

    .c1 p {
  color: red;
}

CSS 伪类选择器

方法 作用
a:link 对未访问的链接的样式设置
a:hover 鼠标移动到链接上的样式设置
a:active 选定的链接的样式设置
a:visited 对已访问过链接的样式设置
input: focus input输入框获取焦点时样式的设置

​ 常用的就是 a: hover ， 在鼠标悬浮上去之后样式改变 适用于所有含有文本的标签

​ 其中，a 标签默认的样式有两种分别是蓝色（链接地址从来没有点击过）和紫色 （链接地址已经被点击过了）

css 伪元素选择器

通过css代码来操作标签的文本内容

  • first-letter

    常用的给首字母设置特殊样式：

    p:first-letter {
  font-size: 48px;
  color: red;
}

    给首位单独设置样式，其余的不变

  • before

    在每个 p 元素之前插入内容

    p:before {
  content:"*";
  color:red;
}

  • after

    在每个 p 元素之后插入内容

    p:after {
  content:"[?]";
  color:blue;
}

before和after多用于清除浮动

选择器的优先级

  • 选择器相同的情况（就近原则）

    当选择器相同，引入的位置不同的情况下，谁离得进就修改谁的样式

  • 选择器不同的情况

    行内 > id选择器 > 类选择器 > 标签选择器

  • 强制让样式生效（不准寻选择器的优先级）

    在选择器内添加 ！important 强制让样式生效，但若是过多使用 会让样式文件混乱，不容易维护

css属性相关

  • 字体样式

    1.宽和高

    width 属性可以为元素设置宽度

    height 属性可以为元素设置高度

    注：块儿级标签才能设置宽度，行内标签的宽度是由内容来决定的

    2.字体属性

    字体样式 作用
    font 字体属性的缩写，可以在一个声明中设置多个字体属性。
    font-family 设置字体
    font-style 设置字体的风格，如：倾斜、斜体等
    font-weight 设置字体的粗细
    font-size 设置字体的尺寸
    line-height 设置字体的行高
    text-transform 设置字母的大小写
    text-decoration 对字体进行修饰（下划线、上划线）
    color 设置字体的颜色
    text-align 设置元素中的文本的水平对齐方式
    text-indent 设置元素的首位缩进

    3.字体属性的具体作用

    1.字体的样式
{font-family: '宋体';}
2.字体的大小
font-style: oblique;	(偏倾斜体)
font-style: italic;		(斜体)
font-style: normal;		(正常)
3.字体的粗细
font-weifht: bold;		(粗体)
font-weifht: light;		(细体)
font-weifht: normal;	(正常)
4.字体的尺寸
font-size: x-large;		(特大)
font-size: xx-small;	(极小)
font-size: 数值;		  (根据数值的大小设置字体的尺寸)
5.字体的行高
line-height:normal;		(正常)
line-height: 数值;	   (根据数值的大小设置行高)
6.设置字母的大小写
text-transform: capitalize; (首字母大写)
text-transform: uppercase;	(全大写)
text-transform: lowercase;	(全小写)
text-transform: none;		(无状态)
7.对字体的修饰
text-decoration: underline;		(下划线)
text-decoration: overline;		(上划线)
text-decoration: line-through;	(删除线)
text-decoration: blink;			(让字体闪烁)
text-decoration: inherit；		(继承父元素的text-decoration属性的值。)
8.字体颜色
color: 十六进制数	(设置16进制数对应的颜色属性)
color: RGB()		(设置RGB数所对应的颜色属性)
color: 颜色名称		 (用颜色的英文名称直接设置字体颜色)
color: rgba(255,0,0,0.5) (与rgb数所对应的颜色一致，但最后一位决定颜色的深浅)
9.文字的对齐方式
text-align: left;		(左对齐)
text-align: right;		(右对齐)
text-center: center;	(居中对齐)
text-center: justify;	(两端对齐)
10.设置首行缩进
text-indent:  数值;	   (首行缩进的值，一般为32px)

  • 背景属性

    1.背景属性的样式

    背景属性的样式 作用
    background 背景属性的缩写，可以在一个声明中设置背景属性
    background-image 设置背景图
    background-color 设置背景颜色
    background-repeat 背景重复状态
    background-attachment 设置滚动背景
    background-position 设置背景位置

    2.背景属性的作用

    1.设置背景颜色
background-color: red;	(为背景设置颜色)
2.设置背景图片
background-image: url('图片路径'); (设置背景图片)
3.背景重复
background-repeat: repeat(默认); (背景图片平铺排满整个网页)
background-repeat:	repeat-x;	(背景图片只在水平方向上平铺)
background-repeat:	repeat-y ;	(背景图片只在垂直方向上平铺)
background-repeat: no-repeat;	(背景图片不平铺)
4.背景滚动
background-attachment: fixed;	(固定背景，其他背景滚动)
background-attachment: scroll;	(设置背景滚动状态)
5.设置背景位置
background-position:left ;		(将背景水平位置设置)
background-position:top ;		(将背景垂直位置设置)
background-position:center(左右)，center(上下); (将背景集中对齐)

  • 边框属性

    1.边框属性的样式

    边框属性的样式 作用
    border-width 边框的宽度
    border-style 边框线的粗细
    border-color 边框的颜色
    border-radius 设置边框形态

    2.边框线的具体样式

    值 描述
    border-style：none 无边框
    border-style：dotted 点状虚线边框
    border-style：dashed 矩形虚线边框
    border-style：solid 实线边框

    3.设置边框

    #i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}
可简写为：
#i1 {
  border: 2px solid red;
}

    4.设置边框的形态

    用这个属性能实现圆角边框的效果。

    将border-radius设置为长或高的一半即可得到一个圆形。

    border-radius: 50%;

  • 隐藏属性（display）

    用于控制HTML元素的显示效果。

    1.隐藏属性的样式

    值 意义
    display:"none" HTML文档中元素存在，但是在浏览器中不显示
    display:"block" 默认占满整个页面宽度，如果设置了指定宽度
    则会用margin填充剩下的部分
    display:"inline" 按行内元素显示，此时再设置元素的属性都不会有什么影响。
    display:"inline-block" 元素同时具有行内元素和块级元素的特点。

    2.display:"none"与visibility:hidden的区别

    样式 区别
    visibility:hidden 可以隐藏某个元素，但会影响布局空间
    display:none 该隐藏的元素原本占用的空间，会从页面布局中消失

CSS——盒子模型

  • 盒子模型理解

    所有的标签都可以看成是一个快递盒

    用快递盒理解 理解 边距
    两个快递盒之间的距离 标签之间的距离 外边距(margin)
    快递盒的厚度 标签的边框 边框(border)
    盒子内物体距离盒子内壁 内部文本与边框的距离 内边距(padding)
    物体自身的大小 标签内部的内容 内容(content)

  • 盒子类型需要掌握的操作

    1. margin外边距

      .margin-test {
  margin-top:10px;		上边框
  margin-right:20px;	右边框
  margin-bottom:30px;	下边框
  margin-left:40px;		左边框
}

      可以简写为：

      margin:0;   简写形式 作用于上下左右
margin: 10px 20px;  上下  左右
margin: 10px 20px 30px;  上 左右	下
margin: 10px 20px 30px 40px; 上 右 下 左

      ​ body标签自带有8px的外边距

      ​ margin还可以让内部标签居中展示
      ​ margin:100px auto 仅限于水平方向

    2. padding 内填充

      .padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

简写为：
.padding-test {
  padding: 5px 10px 15px 20px;  上右下左
}

浮动布局

在css中，任何元素都可以浮动

  • 浮动的特点

    1.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

    2.由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样

  • 浮动的取值

    浮动是页面必不可少的操作，他有三种取值方式

    取值 含义
    folat: left 向左浮动
    folat: right 向右浮动
    folat: none 默认值，不浮动

  • 规定元素不允许其他浮动元素（clear）

    值 描述
    left 在左侧不允许浮动元素。
    right 在右侧不允许浮动元素。
    both 在左右两侧均不允许浮动元素。
    none 默认值。允许浮动元素出现在两侧。
    inherit 规定应该从父元素继承 clear 属性的值。

    注 ：clear属性只会对自身起作用，而不会影响其他元素。

  • 清除浮动

    ​ 清除浮动的副作用（父标签塌陷问题）

    • 父标签塌陷解决方法

      浮动会造成父标签塌陷 这是一个不好的现象 因为会引起歧义

      解决浮动造成的父标签塌陷：

      .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

      提前写好上述的css操作 遇到标签塌陷就给标签加clearfix类值即可

    浏览器针对文本是优先展示的(浮动的元素如果遮挡会想办法展示)

溢出属性

  • overflow溢出属性

    值 作用
    visible 默认值。内容不会被修剪，会呈现在元素框之外
    hidden 内容会被修剪，并且内容是不可见的
    scroll 内容会被修建，但浏览器会显示滚动条以便查看其余内容
    auto 若内容被修建，浏览器会显示滚动条以便查看其余内容
    inherit 规定应该从父元素继承 overflow 属性的值

    ​ overflow：水平和垂直均设置

    ​ overflow-x：设置水平方向

    ​ overflow-y：设置垂直方向

  • 图片头像设置事例：

    <!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>圆形的头像示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      background-color: #eeeeee;
    }
    .header-img {
      width: 150px;
      height: 150px;
      border: 3px solid white;
      border-radius: 50%;
      overflow: hidden;
    }
    .header-img>img {
      width: 100%;
    }
  </style>
</head>
<body>

<div class="header-img">
  <img src="https://pic.cnblogs.com/avatar/1342004/20180304191536.png" alt="">
</div>

</body>
</html>

定位

有四种定位：静态、相对定位、绝对定位、固定定位

  • static（静态）

    ​ 所有的标签默认都不能直接通过定位修改位置 必须要切换成下面三种之一

  • relative(相对定位)

    ​ 相对于标签原来的位置做定位

  • absolute(绝对定位)

    ​ 基于已经定位过的父标签做定位(如果没有父标签则以body为参照)

  • fixed(固定定位)

    ​ 相对于浏览器窗口做定位

z-index

  • 设置对象的层叠顺序

    1. z-index 值表示谁压着谁，数值大的压盖住数值小的，
    2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
    3. z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
    4. 从父现象：父亲怂了，儿子再牛逼也没用

  • 实例

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定义模态框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 998;
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -300px;
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

opacity

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

用于三层界面的样式

posted @   Nirvana*  阅读(23)  评论(0)  编辑  收藏  举报
相关博文：
·  前端——css补充及初识js
·  jQuery 与 Bootstrap框架
·  CSS层叠样式表
·  前端之CSS初识
·  02 CSS
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae