首页 > 其他分享 >CSS基础速刷 - 非布局样式(未完待续)

CSS基础速刷 - 非布局样式(未完待续)

时间:2024-10-20 17:45:45浏览次数:7  
标签:速刷 元素 未完待续 样式 字体 选择器 CSS 属性

  1. 全称:Cascading Style Sheet

2. 选择器

选择器 {
属性:值;
属性:值;
}
选择器用于匹配HTML元素,有不同的匹配规则,多个选择器可以叠加。
浏览器解析CSS选择器方式和我们写选择器的方式是相反的:从右往左

选择器分类

伪元素(双冒号)是真实存在的元素,可以被显示出来的元素;伪类(单冒号),当鼠标hover或者。。。元素某种状态下的样式。

选择器的权重

例子:

事实上,10个类选择器不等于1个id选择器的权重,多少个类选择器叠加都抵不过一个id选择器。
其他规则:
直接写在属性里面的style=属性的权重是最高的。
权重一样:就近原则。

  1. 非布局样式:字体
  • 字体族 font-family
    衬线字体(宋体) 非衬线字体(苹方) 等宽字体 手写体 花体
  • 多字体 fallback:系统找不到该字体就往后找。
  • 网络字体、自定义字体
  • iconfont

  1. 非布局样式:行高

标签:速刷,元素,未完待续,样式,字体,选择器,CSS,属性
From: https://www.cnblogs.com/gardenOfCicy/p/18487511

相关文章

  • 横扫CSS - HTML知识复习
    HTML常见元素<metaname="viewport">视口,默认像素980px。适配移动端。HTML版本对比HTML元素分类按默认样式分:块级block(div、p)、行内/内联inline(span)、inline-block(select)按内容分:*4.嵌套关系块级元素可以包含行内元素块级元素不一定能包含块级元素行内元素......
  • 【CSS in Depth 2 精译_052】第三部分:现代 CSS 代码组织 + 第 8 章:概述层叠图层及其嵌
    当前内容所在位置(可进入专栏查看其他译好的章节内容)【第三部分现代CSS代码组织】✔️【第八章层叠图层及其嵌套】✔️8.1用layer图层来操控层叠规则(上篇)✔️8.1.1图层的定义(上篇)✔️8.1.2图层的顺序与优先级(精译中⏳)8.1.3revert-layer关键字文......
  • CSS--如何用清除浮动来解决父盒高度塌陷及文字环绕的影响
    一.父盒的高度塌陷概念在CSS中,当父元素的高度没有明确指定时,其高度由子盒撑开。若子盒全部浮走,则高度塌陷为0。实验一父盒高度为0的初始排列<style>article{/*给父盒设置宽度和背景*/width:1000px;/*height:600px;*/......
  • html+css实现下拉动画
    下拉动画是一个网页上经常看到的东西,有些这是控制它的出现,没有过渡效果,不是很丝滑,市面上看到的文章也只有改变固定高度的,而如何实现父元素的高度不确定的情况下,由子元素的高度作为整体高度,下面为我的代码,仅供参考。<!DOCTYPEhtml><htmllang="en"><head><metacharse......
  • CSS--盒子的浮动
    盒子浮动概念浮动是CSS中的一种定位方式,可以使元素脱离正常的文档流,并相对于其父元素或其他元素进行定位。在布局中,可以使用浮动来实现盒子的位置调整和元素的排列。通过设置元素的float属性为left或right,可以使元素向左或向右浮动。浮动的元素会尽可能地靠向父元素的边缘或......
  • 逼自己看完!!CSS布局技术之——两列布局
    看完你就又多学了一点了!两列布局样式 CSS3中提供了多列布局的支持,可以将文本内容以多列的形式进行排列。通过设置列数和间距等属性,可以控制列布局的样式。很多网站都有些共同的特点,如页面顶部放置一个大的导航栏或广告条,右侧是链接或图片,左侧放置主要内容,页面底部放置版权......
  • 第六章元素应用CSS
    6.1使用CSS设置字体样式font-family:设置字体的类型font-weight:设置字体的粗细font-size:设置字体的大小font-style:设置字体的倾斜6.1.1.字体类型        字体:具有传递语义功能和美学效应两方面作用        CSS:提供font-family属性来控制文本的字体类型......
  • 第六章 元素应用css
    6.1使用css设置字体样式6.1.1.字体类型h1{ font-family:fangsong;}6.1.2.字体大小font-size:25px;6.1.3.字体粗细font-weight:500;6.1.4.字体倾斜font-style:italic;6.2使用CSS设置文本样式6.2.1.文本水平对齐方式text-align:center;6.2.2......
  • CSS文字超出宽度---换行总结
       <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</titl......
  • 帝国网站后台css怎么修改?修改网站后台参数?
    修改帝国网站后台的CSS样式可以通过以下几种方法实现:直接修改源文件:找到帝国CMS安装目录下的后台样式文件,通常位于e/admin/style目录下。使用文本编辑器打开对应的CSS文件(如style.css)进行编辑。修改完成后保存文件,刷新后台页面查看效果。通过自定义CSS文件:在后台模板......