CSS选择器、字体文本属性、三大特性、盒子模型等

目录

  • 导入
    • css简介
      • HTML的局限性
      • CSS-网页美化
      • CSS语法规范
      • CSS代码风格
  • 选择器
    • 基础选择器
    • 复合选择器
  • CSS字体属性
    • 字体系列font-family
    • 字体大小font-size
    • 字体粗细font-weight
    • 文字样式font-style
    • 字体复合属性font
  • CSS文本属性
    • 文本颜色color
    • 对齐文本text-align
    • 装饰文本text-decoration
    • 文本缩进text-indent
    • 行间距(即行高)line-height
  • CSS的引入方式
  • emmet语法
  • 元素显示模式
    • 什么是？
    • 分类
    • 模式转换
    • 单行文字垂直居中
  • 背景
  • CSS三大特性
  • 盒子模型

导入

css简介

HTML的局限性

只关注语义 可做简单样式，但繁琐

CSS-网页美化

是层叠样式表，简称CSS样式表或级联样式表，是一种标记语言
主要设置HTML页面中的文本内容（字体、大小、对齐方式），图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式
CSS最大价值：有HTML专注做结构，样式交给CSS，即结构和样式相分离

CSS语法规范

CSS规则由两部分组成：选择器、一条或多条声明，写在<head></head>中的<style></style>标签里
/* 选择器{样式} */
选择器样式

选择器是用于指定CSS样式的HTML标签，花括号内是设置的具体样式
属性和属性值以“键值对”形式出现，属性和属性值之间用英文冒号分开，多个键值对之间用英文分号区分

CSS代码风格

1 样式格式书写：紧凑式、展开式（一行一个属性）（推荐）
2 样式大小写：大小写均可，推荐小写
3 空格规范：
属性值前面，冒号后面 保留一个空格
选择器和大括号中间保留一个空格

选择器

分类：基础选择器、复合选择器

基础选择器

由单个标签组成，包括标签选择器、类选择器、id选择器、通配符选择器

  • 标签选择器

    1. 语法格式：
        标签名 {
        属性1： 属性值1;
        属性2： 属性值2;
        属性3： 属性值3;
        ...
    }
    1. 作用： 选择页面中所有的某一类标签
    2. 缺点： 不能设计差异化样式

  • 类选择器（使用最多）

    1. 语法格式
        .类名 { //不能用标签名、纯数字、中文  做类名
        属性1： 属性值1;
        ...
    }
    1. 优点： 可设计差异化样式
    2. 多类名： 两个类名之间用空格隔开,把公共样式加一个新类名分出去分出去，方便统一修改
      eg：<div class="red font35">多类名</div>

  • id选择器

    1. 语法格式：
    #id {
    属性： 属性值;
}

<div id="">id选择器</div>
    1. 和类选择器的区别：只能调用一次，别的标签不能使用
      class相当于人名，有重名情况，id相当于身份证号，不会重复

  • 通配符选择器
    选定页面中所有标签
    语法格式

    * {
    属性： 属性值;
}

复合选择器

复合选择器由两个或多个基础选择器，通过不同方式组合而成，更准确，更高效

  1. 后代选择器（重要）
    又称包含选择器，可选择父元素里面的子元素
    • 语法格式：
    //表示选中元素1里面的所有的元素2
元素1 元素2 {
    属性： 属性值;
}

eg：
ul li {

}
    • tips：
      ①元素1和元素2中间用空格分开
      ②元素1是父级，元素2是子集
      ③元素2可以是儿子也可以是孙子
      ④元素1和元素2可以是任意基础选择器
  2. 子选择器
    只能选择作为某元素的最近一级元素，即“亲儿子”
    • 语法格式：
    元素1>元素2 {
    样式声明;
}
    • tips:
      ①元素1 2间用>隔开
      ②元素1必须是父级，元素2必须是子级
      ③元素2必须是亲儿子，孙子、重孙不归他管
  3. 并集选择器
    可选择多组标签，同时为他们设定样式
    • 语法格式：
    //并集选择器一般竖着写，最后一个元素不加逗号
元素1,
元素2 {
    样式说明;
}
    • tips:
      ①两个元素之间用,隔开
      ②逗号表示和
  4. 伪类选择器
    用于向某些选择器添加特殊效果
    最大的书写特点是用冒号（:）表示，eg：:hover、:first-child

    • 链接伪类选择器
      伪类选择器

      1. 注意事项
        ①按顺序书写:link\:visited\:hover\:active
        ②链接一般有默认样式，应该单独指定样式

    • focus伪类选择器
      用于选取获得焦点（光标）的表单元素
      一般情况<input>类表单元素才能获取
      语法格式：

    input:focus {
    background-color: yellow;
}

CSS字体属性

字体属性定义字体系列、大小、粗细、文字样式（如斜体）

字体系列font-family

CSS使用font-family属性定义文本的字体系列

  1. 语法格式：
p {
    font-family: '微软雅黑';
}

div {
    font-family: Arial,'Microsoft Yahei','微软雅黑';
}
  1. tips：
    • 各种字体用英文逗号隔开（多个字体起到备胎的作用）
    • 尽量使用系统默认字体，保证在任何用户的浏览器中能正确显示
    • 如果字体由带空格的多个单词组成，加引号
    • 常见字体：body {font-family: 'Microsoft YaHei',tahoma,arial;}

字体大小font-size

  1. 语法格式：
p {
    //可以直接给body指定整个页面的文字大小
    font-size: 20px;
    //px(像素)大小是网页的最常用单位
}
  1. 标题标签比较特殊，需要单独设置大小

字体粗细font-weight

字体粗细

语法格式：

.jiacu {
    font-weight: bold;

    //实际开发中更提倡用数字表示加粗
    font-weight: 700;//这里不用加px，和bold等价
}
h2 {
    font-weight: normal;

    //实际开发中更提倡用数字表示变细
    font-weight: 400;//这里不用加px，和normal等价
}


<h2>只变大不加粗</h2>
<p class="jiacu">加粗</p>

文字样式font-style

文字样式

语法格式：

p {
    font-style: normal;     //标准样式
    //font-style: italic;   //倾斜效果，也可让斜体标签不倾斜
}

字体复合属性font

简写效果

  1. 语法格式：
body {
          //文字样式 字体粗细 字体大小/字体高度 字体系列
    font: font-style font-weight font-size/font-height font-family;
}
  1. tips:
    • 这些font属性顺序不可更改，属性间用空格隔开
    • 不需要设置的属性可以不写，但font-size和font-family必须保留

CSS文本属性

文本属性定义文本的外观，如颜色、对齐文本、装饰文本、文本缩进、行间距

文本颜色color

颜色

语法格式：

div {
    color: blue;
}

对齐文本text-align

对齐

  1. 语法格式：
div {
    text-align: center;
}
  1. text-align只能设置水平对齐方式（left、right、center）

装饰文本text-decoration

装饰

  1. 语法格式
div {
    text-decoration: underline;
}
  1. 链接一般自带下划线，none属性可以取消链接的下划线

文本缩进text-indent

语法规范：

p {
    text-indent: 20px; //首行缩进距离
}

p {
    text-indent: 2em;
    //em是一个相对单位，1em是当前元素一个文字的大小，即16px，若没有指定大小，则默认父元素的1文字大小
}

行间距(即行高)line-height

在这里插入图片描述

语法规范：

p {
    line-height: 26px;
}

CSS的引入方式

按CSS样式书写的位置（或引入方式），CSS样式表可分为三大类

  1. 内部样式表（嵌入式）
    写在html页面内部，将CSS代码放在<style>标签中
    <style>标签理论上可以放在html页面的任何部分，但一般放在<head>标签中
  2. 行内样式表（行内式）
    在元素标签内部的style属性中设定CSS样式，使用修改简单样式
    语法格式：
<div style="color: red; font-size: 12px;">行内式</div>
  1. 外部样式表（链接式）
    样式单独写到CSS文件，之后再引入到HTML页面中，适用于样式较多的情况
    引入外部样式表：
    1.新建一个.css文件，把所有css代码放到这个文件中
    2.在HTML页面中，使用<link>标签(引入在<head>标签中)引入这个文件
    eg:<link rel="stylesheet" href="css文件路径">

emmet语法

作用：提高编写速度①快速生成HTML结构语法 ②快速生成CSS样式语法

  1. 快速生成HTML结构语法
    HTML快速

  2. 快速生成CSS样式语法
    CSS快速

元素显示模式

什么是？

标签以什么方式显示，比如div自己占一行，一行可放多个span

分类

  1. 块元素
    <h1>-<h6> <p> <div> <ul> <ol> <li>
    ①独占一行
    ②宽度、高度、外边距、内边距可控制
    ③宽度默认是容器的100%
    ④是一个容器及盒子，里面放行内或块元素
    ⑤文字类元素内不能放块级元素（即p标签、标题标签等内不能放div等块级元素
  2. 行内元素
    <a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>
    ①一行显示多个
    ②高、宽不可自定义
    ③默认宽度是它本身内容的宽度
    ④行内元素只能容纳文本或其他行内元素
    ⑤链接里不能再放链接
    ⑥<a>里可以放块级元素
  3. 行内块元素
    行内元素有几个特殊标签<img/>``````<input/>``````<td>同时具有块元素和行内元素的特点
    ①相邻行内元素在一行，但它们之间有空白间隙，一行可显示多个
    ②默认宽度是它本身内容的宽度
    ③宽度、高度、外边距、内边距可控制

模式转换

一个模式需要另一种模式的特性

  1. 转换为块元素：display:block;
  2. 转换为行内元素：display:inline;
  3. 转换为行内块元素：display:inline-block;

单行文字垂直居中

让文字高度等于盒子高度
eg：eg

原理：
原理

背景

  1. 背景颜色
    一般默认是透明：transparent
background-color: 颜色值;
  1. 背景图片
    使用背景图片的情况：①小的装饰类图案 ②大的背景图
    便于控制位置
    参数
background-images: none|url(地址);
  1. 背景平铺
    默认情况下均为平铺
    平铺
background-repeat: repeat|no-repeat|repeat-x|repeat-y;

tips：页面既可以设置背景颜色也可以设置背景图片，但背景图片会压住背景颜色

  1. 背景图片位置
    位置
background-position: x y;
  • tips:
    1. 参数是方位名词（left、right、top、center、bottom）
      ① 指定的两个值都是方位名词时，顺序可调换 ②只设置一个方位名词，第二个参数默认居中对齐
    2. 参数是精确单位
      ① 指定的两个值都是精确单位时，顺序不可调换 ②只设置一个数值，那一定是x值，y默认居中
    3. 参数是混合单位
      第一个值一定是x，第二个值一定是y
  1. 背景固定
    设置图像是否固定或者随页面其余部分滚动
    固定
background-attachm: scroll|fixed;

  1. 背景复合属性
    在这里插入图片描述

  2. 背景色半透明

background: rgba(0,0,0,0.3);

只能用rgb()这种形式表示颜色，最后一个参数a表示alpha透明度，取值范围在0-1之间

CSS三大特性

  1. 层叠性
    相同选择器给设置相同的样式，此时后设置的样式会覆盖前一个样式
    原则：① 样式冲突则覆盖 ② 样式不冲突，不会层叠
    层叠性

  2. 继承性
    子标签继承父标签的某些样式，文字颜色、字号等(text- \font- \line- \color),盒子高度、内外边界等不会继承
    行高的继承：
    行高可以跟单位也可以不跟单位

body {
    font:12px/1.5 'Microsoft Yahei';
}
div {
    //此处1.5指当前行高的1.5倍，即14*1.5
    //若此处div没有指定行高，则继承父亲的行高12px
    font-size: 14px;
}
  1. 优先级
    当同一个元素指定了多个选择器，就会有优先级的产生
    ①选择器相同（都是同一种选择器，例如都是标签选择器或都是类选择器），则执行层叠性
    ②选择器不同，则根据选择器权重执行
    在这里插入图片描述

在这里插入图片描述

tips:tips

复合选择器会有权重叠加
eg：ul li {}（权重相当于0001+0001） 比 li {}（权重为0001）
在这里插入图片描述

盒子模型

  1. 盒子模型的组成
    CSS盒子模型本质是一个盒子，封装周围的HTML元素，包括边框(border)、外边距(margin)、内边距(padding)、实际内容(content)
    在这里插入图片描述

  2. 边框border
    设置边框宽度（粗细）、边框样式、边框颜色
    在这里插入图片描述
    border-style常用solid实线边框、dashed虚线边框、dotted点线边框
    在这里插入图片描述

    • 边框复合写法
    border: 1px solid red
    • 若只设置边框的一边：
    //border- :border-width border-style border-color
border-top:1px solid red
border-bottom:
border-left:
border-right:
    • 细线边框
      把相邻边框合并在一起（两个边框紧挨在一起中间重合的部分会变粗，使用这个属性可不变粗）
    border-collapse:collapse;
    • 边框会影响盒子的大小

  3. 内边距padding
    在这里插入图片描述
    简写方式：
    在这里插入图片描述

    tips：当盒子已经有了宽度和高度时，此时再指定内边框，会撑大盒子，解决方案：用weight/height减去多出来的内边距大小

    padding应用：在这里插入图片描述

  4. 外边距margin
    在这里插入图片描述

    简写方式与padding一致

    • margin应用：
      让块级盒子居中条件
      ① 盒子必须指定宽度 ② 盒子左右的外边距都设置为auto
      语法规范：
      div {
    width:960px;
    margin:0 auto;
}
      常见写法：
      在这里插入图片描述

    让行内元素或行内块元素对齐的方法：给其父元素添加text-align:center

    • 外边距合并

      1. 相邻块元素垂直外边距的合并
        在这里插入图片描述

      解决方案：只给一个盒子添加外边距
      2. 嵌套块元素垂直外边距的塌陷
      在这里插入图片描述

      解决方案：
      ① 为父元素定义上边框
      ② 为父元素定义上内边框
      ③ 为父元素添加overflow：hidden
      ④ 浮动、固定、绝对定位的盒子不会有塌陷

  5. 清除内外边距
    因为很多网页元素都有默认的内外边距，而且不同浏览器默认值不一致，因此布局前要清楚内外边距
    语法格式：

    * {
    padding:0;
    margin:0;
}

    tips:行内元素尽量只设置左右内外边距，不设置上下，如果转换成了块元素或行内块元素就可以

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/597271.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Hive数据模型

Hive数据模型

Hive数据模型 1. 表&#xff08;Table&#xff09;&#xff1a; 表是数据库中的基本组成单位&#xff0c;用于存储数据。它由一系列的行和列组成&#xff0c;每行代表一个记录&#xff0c;每列代表一种属性或字段。创建表时&#xff0c;你需要定义列的数据类型、约束和索引等信…
阅读更多...
水电站LCU屏技术参数，应用案例解析

水电站LCU屏技术参数，应用案例解析

项目咨询请点击&#xff1a;设备自动化技术商务咨询 水电站LCU屏简介&#xff1a; 水电站LCU屏一般布置在水电站设备附近&#xff0c;对电站设备的运行工况进行实时监视和控制&#xff0c;是电站计算机监控系统的较底层控制部分。水电站一般会配置一个公用LCU屏柜&#xff0c;…
阅读更多...
linux学习笔记——硬盘原理以及linux中的sector与block

linux学习笔记——硬盘原理以及linux中的sector与block

在计算机硬盘中&#xff0c;最小的存储单位叫做扇区sector&#xff0c;0.5kb&#xff0c;多个连续扇区组合在一起形成了块block&#xff0c;最小的块包含8个扇区&#xff0c;4kb 我们可以在linux中印证 创建一个新的文件2.txt&#xff0c;查看文件大小为0k 在文件中添加字符后…
阅读更多...
2022——蓝桥杯十三届2022国赛大学B组真题

2022——蓝桥杯十三届2022国赛大学B组真题

问题分析 看到这个问题的同学很容易想到用十层循环暴力计算&#xff0c;反正是道填空题&#xff0c;一直算总能算得出来的&#xff0c;还有些同学可能觉得十层循环太恐怖了&#xff0c;写成回溯更简洁一点。像下面这样 #include <bits/stdc.h> using namespace std; in…
阅读更多...
大厂Java面试题：MyBatis是如何进行分页的？分页插件的实现原理是什么？

大厂Java面试题：MyBatis是如何进行分页的？分页插件的实现原理是什么？

大家好&#xff0c;我是王有志。 今天给大家带来的是一道来自京东的关于 MyBatis 实现分页功能的面试题&#xff1a;MyBatis是如何进行分页的&#xff1f;分页插件的实现原理是什么&#xff1f;通常&#xff0c;分页的方式可以分为两种&#xff1a; 逻辑&#xff08;内存&…
阅读更多...
PON网络和HFC网络

PON网络和HFC网络

目录 1.概念 2.分类 3.重点 1.概念 PON PON是一种典型的无源光纤网络&#xff0c;是一种点到多点的无源光纤接入技术。 是指 (光配线网中) 不含有任何电子器件及电子电源&#xff0c;ODN全部由光分路器 (Splitter) 等无源器件组成&#xff0c;不需要贵重的有源电子设备。一个…
阅读更多...
Java | Leetcode Java题解之第73题矩阵置零

Java | Leetcode Java题解之第73题矩阵置零

题目&#xff1a; 题解&#xff1a; class Solution {public void setZeroes(int[][] matrix) {int m matrix.length, n matrix[0].length;boolean flagCol0 false;for (int i 0; i < m; i) {if (matrix[i][0] 0) {flagCol0 true;}for (int j 1; j < n; j) {if (…
阅读更多...
【1小时掌握速通深度学习面试8】生成模型-中

【1小时掌握速通深度学习面试8】生成模型-中

目录 28.DBN与DBM 有什么区别? 29.VAE如何控制生成图像的类别? 30.如何修改VAE的损失函数&#xff0c;使得隐藏层的编码是相互解耦的? 31.自回归方法如何应用在生成模型上? 32.原始 VAE存在哪些问题? 有哪些改进方式? 33.如何将VAE与GAN 进行结合&#xff1f; 34.…
阅读更多...
【LeetCode】环形队列实现

【LeetCode】环形队列实现

目录 前言1. 环形队列概念2. 循环队列实现设计3. 功能实现3.1 定义3.2 初始化3.3 判断队列是否为空3.4 判断队列是否为满3.5 入栈3.6 出栈3.7 获取队头数据3.8 获取队尾数据3.9 销毁 4. 总结5. 完整通过代码 前言 之前我们学习环形链表相关问题&#xff0c;现在我们来看看环形…
阅读更多...
抖音爆火的QQ价格评估前端源码

抖音爆火的QQ价格评估前端源码

最近抖音很火直播给别人测qq价值多少&#xff0c;这个源码只有前端&#xff0c; 包含激活码验证页&#xff0c;评估页 源码免费下载地址抄笔记 (chaobiji.cn)
阅读更多...
流畅的python-学习笔记_符合python风格的对象

流畅的python-学习笔记_符合python风格的对象

对象表示形式 查看对象说明&#xff0c;可以通过__repr__和__str__方法&#xff0c;前者主要用于开发者&#xff0c;后者主要用于用户&#xff0c;这两个方法分别对内置函数repr和str函数提供支持 向量类 备选构造方法 classmethod和staticmethod staticmethod用的不是特别…
阅读更多...
力扣每日一练(螺旋矩阵)

力扣每日一练(螺旋矩阵)

54. 螺旋矩阵 - 力扣&#xff08;LeetCode&#xff09; 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[1,2,3,6,9,8,7,4,…
阅读更多...
数据库提权

数据库提权

1.此时实验需要用到的软件&#xff1a; &#xff08;1&#xff09;phpStudy该程序包集成最新的ApachePHPMySQL phpMyAdminZendOptimizer,一次性安装,无须配置即可使用,是非常方便、好用的PHP调试环境.该程序不仅包括PHP调试环境,还包括了开发工具、开发手册等.总之学习PHP只需…
阅读更多...
STM32——TIMER（定时器）篇

STM32——TIMER（定时器）篇

技术笔记&#xff01; 1. 定时器概述&#xff08;了解&#xff09; 1.1 软件定时器原理 使用纯软件&#xff08;CPU死等&#xff09;的方式实现定时&#xff08;延时&#xff09;功能 缺点&#xff1a;1. 延时不准确 2. CPU死等。 1.2 定时器定时原理 1.…
阅读更多...
在Codelab对llama3做Lora Fine tune微调

在Codelab对llama3做Lora Fine tune微调

Unsloth 高效微调大模型的工具&#xff0c;通过Unsloth微调Llama3, Mistral, Gemma 速度提升2-5倍&#xff0c;内存减少70%&#xff01; Codelab 创建一个jupyter notebook 选择 T4 GPU 安装Fine tune 相关的lib %%capture import torch major_version, minor_version torch…
阅读更多...
等保测评—Linux-CentOS标准范例截图

等保测评—Linux-CentOS标准范例截图

密码输入错误无法登录 用户账户情况包含root、guanli、shenji 查看审计用户权限 身份鉴别&#xff1a; cat /etc/passwd&#xff0c;核查用户名和 UID&#xff0c;是否存在同样的用户名和 UID cat /etc/shadow&#xff0c;查看文件中各用户名状态 &#xff0c; 核查密码一栏为…
阅读更多...
day1Qt作业

day1Qt作业

#include "mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent) {this->resize(540,415);//窗口大小this->setFixedSize(540,415);//固定窗口大小this->setWindowTitle("QQ");//标题this->setWindowIcon(QIcon("E:\\hqyjap…
阅读更多...
获取转转数据，研究完转转请求，tx在算法方面很友好。

获取转转数据，研究完转转请求，tx在算法方面很友好。

本篇文章仅供学习讨论。 文章中涉及到的代码、实例&#xff0c;仅是个人日常学习研究的部分成果。 如有不当&#xff0c;请联系删除。 在研究完阿里的算法以后&#xff08;其实很难说研究完&#xff0c;还有很多内容没有研究透&#xff0c;只能说暂时告一段落&#xff09;&…
阅读更多...
【CTF Web】XCTF GFSJ0475 get_post Writeup（HTTP协议+GET请求+POST请求）

【CTF Web】XCTF GFSJ0475 get_post Writeup（HTTP协议+GET请求+POST请求）

get_post X老师告诉小宁同学HTTP通常使用两种请求方法&#xff0c;你知道是哪两种吗&#xff1f; 解法 用 Postman 发送一个 GET 请求&#xff0c;提交一个名为a,值为1的变量。 http://61.147.171.105:65402/?a1用 Postman 发送一个 POST 请求&#xff0c;提交一个名为b,值为…
阅读更多...
Embeddings原理、使用方法、优缺点、案例以及注意事项

Embeddings原理、使用方法、优缺点、案例以及注意事项

Embeddings是一种将高维数据映射到低维空间的技术&#xff0c;常用于处理自然语言处理&#xff08;NLP&#xff09;和计算机视觉&#xff08;CV&#xff09;任务。Embeddings可以将复杂的高维数据转换为低维稠密向量&#xff0c;使得数据可以更容易地进行处理和分析。本文将介绍…
阅读更多...
最新文章

Copyright @ 2022~2023