html CSS部分 (总算是全总结完了)

2023-11-29 01:40

本文主要是介绍html CSS部分 (总算是全总结完了),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

  • CSS
    • 外部样式表
    • 内部样式表
    • 内联样式表
    • css文件之间的引用 @import
  • 选择器权重
    • !important
  • 选择器
    • 全局选择器
    • 子代选择器
    • 后代选择器
      • inherit 继承父类
      • initial 与浏览器一致
      • unset 自然继承
    • 类型选择器
    • 类选择器
    • id选择器
    • 标签属性选择器
      • 1.值完全等于
      • 2.值以什么开头
      • 3.值以什么结尾
      • 4.值包含什么
    • 伪类选择器
      • hover 鼠标放上去的效果
      • 修改元素样式
        • first-child 修改第一个元素的样式
        • last-child 修改最后一个元素的样式
        • nth-child 修改指定位置元素的样式
      • 伪元素
        • first-line 修改第一行的样式
        • first-line 修改第一个字的样式
        • after 在元素之后放下什么
        • before 在元素之前放下什么
  • 盒模型
    • 块级标签与内联元素盒模型的区别
    • 盒子的外边距(Margin)设置
    • 盒子的内边距(Padding)设置
    • 盒子的边框或厚度(Border)设置
    • 块级标签居中设置
    • 替代盒模型(IE盒模型)
  • 标签显示模式 display
  • 图片样式设置
    • 背景图片样式设置
      • background-repeat,background-size
      • background-color 背景颜色
  • CSS常用样式
    • 文字相关样式
      • 文字状态:(font-style)
      • 设置文字的粗体值 (fontWeight)
      • 英文字母大小写设置 (text-transform)
      • 控制文本是否有上、下划线,删除线
        • text-decoration
      • 阴影 (text-shadow,box-shadow)
      • 文本对齐方式 (text-align)
      • 行间距 (line-height)
      • 字间距,单词间距,段前间距
        • letter-spacing,word-spacing,text-indent
      • font 将多个文本属性一次性设置
      • 单行隐藏效果:省略号
      • 多行隐藏效果:省略号
      • css单位
      • 滚动条设置
    • 列表相关样式
      • 设置无序列表前方的小圆点样式
      • list-style-type (list-style-image)
    • 超链接相关样式(link,visited)
    • 鼠标对超链接互动相关样式(hover,active)
    • 元素的外围框
      • outline
    • 导入外部字体样式
      • @font-face
  • 定位 position
    • 相对定位 relative
    • 绝对定位 absolute
    • 固定定位 fixed
    • 浮动布局
    • 弹性盒子布局
      • 元素挤压效果 flex-shrink
      • 项目y轴排列方式

CSS

CSS(Cascading Style Sheets, 层叠样式表),控制DOM元素的视觉外观。

同于设置和布置网页 设置字体,颜色,大小,间距甚至还可以用来排版

CSS样式由选择符和属性组成,选择符后面跟着属性,但被一对花括号所包围。属性和值由冒号分隔,每个属性声明以分号结尾。 例如:

    <style>.box1 {color: tomato;font-size: 32px;}</style>

外部样式表

通过link引用,称为外部样式表

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

内部样式表

选择器 {
属性名;属性值;
属性名;属性值;
……
}
在相同规则的选择器下,遵循就近原则

  <style>.box1 {color: tomato;font-size: 32px;}.box1 {color: tomato;font-size: 24px;}</style>

内联样式表

通过元素上的style定义样式:内联样式

  <div style="color:tomato;font-size: 32px;">这里有很多很多的字</div>

css文件之间的引用 @import

使style具有style1的h1样式
style1.css :

h1{color: darkcyan;
}

style.css :

@import 'style1.css';
.box2 {color: #666;font-size: 32px;
}

选择器权重

不同的选择器,权重是不一样的

1.如果我的样式是声明在style这个标签里面,里面的任何选择器,都具备1000的权重

2.所有的id选择器,默认权重100

3.含有类选择,属性选择器,伪类选择器,权重是10

4.选择器中包含伪元素选择器,则为1分

    /* 类选择器 */.Class_h1 {color: bisque;/* 颜色是可以被继承的属性 */ }/* 标签选择器 */h1 {color: yellow;}/* id选择器 */#Id_h2 {color: red;}

!important

强制让样式属性具备最高最高优先级,可以完全覆盖掉旧的规则

    .Class_h1 {color: bisque !important;}

选择器

全局选择器

整个body都会受到影响
写法: * 号加大括号

<style>* {margin: 0;padding: 0;/* 清空内外边距,使页面更加美观*/}
</style>

子代选择器

只会影响到第一层元素,不会影响之后的层级元素
通俗来讲就是:只会影响到儿子辈,不会影响孙子辈及之后

写法:大于号加点 + 子类元素名

<style>.div1>.son1 {border: 1px solid #18d39b;}
</style>

后代选择器

之后的层级元素都会继承样式

写法:空格加点 + 子类元素名

<style>.div1 .son1 {border: 1px solid red;}
</style>

inherit 继承父类

当前修改样式这个元素会必定继承父元素的样式

	.li1 a {color: inherit;}

initial 与浏览器一致

设置为和浏览器保持一致的样式

	.li2 a {color: initial;}

unset 自然继承

设置的自然继承,如果能够继承样式就继承,如果不能够就保持原有的样子

    .li3 a {color: unset;}

类型选择器

	h1 {/* 类型选择器 */}

类选择器

	.box1 {/* 类选择器 */}

id选择器

	#box1 {/* id选择器 */}

标签属性选择器

    a[title] {/* 标签属性选择器 *//* title为a标签的title属性 */font-size: 32px;}

1.值完全等于

	a[href='https://www.baidu.com/'] {/* 值完全等于 */color: salmon;}

2.值以什么开头

	a[href^='#'] {/* 以什么属性值开头的 */color: red;}

3.值以什么结尾

	a[href$='#'] {/* 以什么属性值结尾的 */color: red;}

4.值包含什么

	a[href*='#'] {/* 包含了属性值的 */color: red;}

伪类选择器

冒号后面追加固定关键词。

hover 鼠标放上去的效果

设置一个按钮

  <div class="btn">这是一个按钮</div>

按钮样式设置:

<style>.btn {width: 120px;height: 40px;line-height: 38px;text-align: center;background-color: black;color: yellow;border: 3px solid yellow;border-radius: 8px;cursor: pointer;/* width、height:div盒子的长和宽line-height:字体实际在按钮内所占的高度text-align:文字在按钮里的位置background-color:按钮的背景颜色color:按钮内字体的颜色border:设置此按钮边框的线宽度以及颜色border-radius:此按钮边框的角的弧度cursor:设置当鼠标放在上面时,鼠标会变成手指(pointer)样式*/}  
</style>

按钮本来的样子:
在这里插入图片描述

按钮的效果设置:鼠标放到按钮上时变换颜色

<style>.btn:hover {/* :hover 鼠标放上去的效果 */background-color: blue;color: white;}
</style>

鼠标放上去时

这篇关于html CSS部分 (总算是全总结完了)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/430997

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

git使用的说明总结

Git使用说明 下载安装(下载地址) macOS: Git - Downloading macOS Windows: Git - Downloading Windows Linux/Unix: Git (git-scm.com) 创建新仓库 本地创建新仓库:创建新文件夹,进入文件夹目录,执行指令 git init ,用以创建新的git 克隆仓库 执行指令用以创建一个本地仓库的

poj 2976 分数规划二分贪心(部分对总体的贡献度) poj 3111

poj 2976: 题意: 在n场考试中,每场考试共有b题,答对的题目有a题。 允许去掉k场考试,求能达到的最高正确率是多少。 解析: 假设已知准确率为x,则每场考试对于准确率的贡献值为: a - b * x,将贡献值大的排序排在前面舍弃掉后k个。 然后二分x就行了。 代码: #include <iostream>#include <cstdio>#incl

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧