CSS样式

最新推荐文章于 2023-07-28 21:17:42 发布
最新推荐文章于 2023-07-28 21:17:42 发布
阅读量191 收藏
点赞数
分类专栏： H5 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47243236/article/details/120049847
版权

什么是CSS

CSS（Cascading Style Sheet ）：级联样式表，表现HTML或XHTML文件样式的计算机语言。

CSS的优势：

  • 内容与表现分离
  • 网页的表现统一，容易修改
  • 丰富的样式，使得页面布局更加灵活
  • 减少网页的代码量，增加网页的浏览速度，节省网络带宽
  • 运用独立于页面的CSS，有利于网页被搜索引擎收录

基本语法：

选择器{
    声明1;
    声明2
}

CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上。

style标签

css样式写在html的styp标签里。例如：

<style type="text/css">
h1 {
	font-size:12px;
	color:#F00;
}
</style>

HTML引入样式

HTML样式的优先级：行内样式 > 内部样式 > 外部样式（就近原则）

行内样式

使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1>

内部样式

CSS代码写在 <head> 的 <style> 标签中

<style type="text/css">
    ...
</style>

优点：方便同页面中修改样式。

缺点： 不利于多个页面间共享复用代码及维护，对内容与样式的分离不够彻底。

外部样式

CSS代码保存在扩展名为 .css 的样式表中，HTML文件引用扩展名为 .css 的样式表有两种方式。

链接式

href：文件路径

rel：使用外部样式表

type：文件类型

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

导入式

在内部样式加入如下代码即可：

<style type="text/css">
    @import url("css/index.css");
</style>

链接式于导入时的区别：

  • 标签属于XHTML，@import是属于CSS2.1
  • 使用链接的CSS文件先加载到网页当中，再进行编译显示
  • 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
  • @import是属于CSS2.1的特有，对不兼容的浏览器无效

 

CSS选择器

基本选择器

不遵循就近原则，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级。

  1. 标签选择器：<p> {...}
  2. 类选择器：.class {...}
  3. ID选择器：#id {...}
  • 标签选择器直接应用于HTML标签
  • 类选择器可在页面中多次使用
  • ID选择器在同一个页面中只能使用一次

 

高级选择器

层次选择器

选择器类型功能描述
E F后代选择器选择匹配的F元素，且匹配的F元素被包含在匹配的*E元素内
E>F子选择器选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F相邻兄弟选择器选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F通用兄弟选择器选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

结构伪类选择器

image-20210901191216043

使用E F:nth-child(n)和E F:nth-of-type(n)的关键点：

E F:nth-child(n)在父级里从一个元素开始查找，不分类型

E F:nth-of-type(n)在父级里先看类型，再看位置

属性选择器

E[attr]：选择匹配具有属性attr的E元素

E[attr=val]：选择匹配具有属性attr的E元素，并且属性值为val(其中val区分大小写)

E[attr^=val]：其属性值以val开头的任意字符串

E[attr$=val]：其属性值以val结尾的任意字符串

E[attr*=val]：其属性值中任意位置相匹配

 

常用属性

字体属性

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型。

p span{font:oblique bold 12px "楷体";}

  • 字体风格（ font-style ）

    • normal：默认值
    • Italic、oblique：斜体

  • 字体粗细（ font-weight ）

    • normal：默认值

    • bold：粗体字体

    • bolder：更粗的字体

    • lighter：更细的字体

    • 也可使用100-900书写，bold等同于700

  • 字体大小（ font-size ）

    • 单位为px

  • 字体类型（ font-family ）

    • 同时声明多种字体，字体之间用英文逗号分隔
    • 如果写的是中文字体，则需要用双引号引起来，如果英文字体之间有空格的话，也需要将字体用双引号引起来

文本样式

属性名解释应用
font-size字体大小“楷体”
font-weight字体粗细123px
rgb三原色rgb(0,255,255)
rgbaa：透明度rgba(0,0,255,0.5)
text-align对齐方式Left、Right、Center、Justify（两端）
text-indent首行缩进em或px
text-height行高px
text-decoration文本装饰None、Underline(下划线)、Overline(上划线)、Line-through(删除线)
vertical-align垂直对其方式Middle、Top、Bottom
text-shadow文本阴影red 12px 12px 12

超链接伪类样式

样式说明
link未单击访问时超链接样式
visited单机访问后超链接样式
hover鼠标悬浮其上的超链接样式
active鼠标单击未释放的超链接样式

列表样式

List-style：列表项标记的类型

样式说明
none无标记符号
disc实心圆、默认类型
circle空心圆
square实心正方形
decimal数字

背景

背景颜色

Background-color ：transparent（透明）

背景图像

Background-image ：url（图片路径）

背景重复方式

Background-repeat

重复方式说明
repeat沿水平和垂直两个方向平铺
no-repeatn不平铺，即只显示一次
repeat-x只沿水平方向平铺
repeat-y只沿垂直方向平铺

背景定位

Background-position

属性值说明
Xpos Ypos单位：px，X表示水平位置，Y表示垂直位置
X% Y%使用百分比表示背景的位置
X、Y方向关键词水平方向的关键词：left、center、right ；垂直方向的关键词：top、center、bottom

设置背景

Background: 背景颜色 背景图片 背景定位 背景重复方式

background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;

背景尺寸

Background-Size

属性值描述
auto默认值，使用背景图片保持原样
percentage当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover整个背景图片放大填充了整个元素
contain让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

线性渐变

线性渐变 ：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
径向渐变 ：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

Linear-gradient ：线性渐变（渐变方向，第一个颜色，第二个颜色……)

渐变方向：

渐变方向说明
to top从下到上
to bottom从上到下
to left从右到左
to right从左到右
to top left从右下到左上
to top right从左下到右上
to bottom left从右上到左下
to bottom right从左上到右下

边框

顺序一般没有强制要求，一般来说：粗细–颜色–样式。

边框颜色

Border-color ：上 右 下 左

边框粗细

Border-width

属性值说明
thin细的边框
medium默认值，2px
tthick粗的边框
Xpx像素值

边框样式

Border-style

属性值说明
none无边框
dotted点线边框
dashed虚线边框
silid实线边框

圆角边框

border-radius

盒子阴影

box-shadow

  • inset（内阴影，否则不写）
box-shadow: inset x-offset y-offset blur-radius color;

边距

外边距

Margin

  • 遵循上右下左的顺序
  • Auto为特殊值，居中

如果要使用外边距居中效果，则需要当前元素为块元素以及有固定宽度。

内边距

Padding

准则与外边距一致。

Display

属性值说明
block块级元素
inline内联元素
inline-block行内块元素
none隐藏

浮动

Float

属性值说明
Left左边
Right右边
None默认

如果进行浮动，会脱离标准文档流，没有设置浮动的文字，会环绕在浮动元素周围进行显示，这是最初创造浮动的目的，浮动的文字在没有设置宽度的时候，会占满一行

Display和float的区别

Display:inline-block

  • 可以让元素排在一行，并且支持宽度和高度，代码实现方便
  • 位置不可控制

Float

  • 可以让元素排在一行并且支持宽度和高度，可以决定排列方向
  • Float在浮动之后元素脱离标准文档流，会对周围的元素产生影响，必须在父级清除浮动样式

定位

Static：默认值，没有定位

Relative：相对定位

  • Left为正时，向右移动。top为正时，向下移动
  • 设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
  • 设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
  • 设置相对定位的盒子原来的位置会被保留下来
  • 使用场景：一般很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

Absolute：绝对定位

  • 使用绝对定位的元素会以它最近的一个“已经定位”的“祖先元素”为基准进行偏移
  • 如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
  • 绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响
  • 元素位置发生偏移后，它原来的位置不会被保留下来
  • 使用场景：下拉菜单、焦点图轮播、弹出数字气泡等

Fixed：固定定位

  • 相对浏览器窗口来定义
  • 偏移量不会随滚动条的移动而移动
  • 使用场景：左右两边固定广告、返回顶部图标、吸顶导航栏等

Z-index属性

调整元素定位时重叠层的上下位置

  • Z-index属性值：整数，默认值为0
  • 设置了position属性时，z-index属性可以设置各元素之间的重叠高低关系
  • Z-index值大的层次位于其值小的层上方

设置透明度

  • Opacity：x：x值为0~1，值越小越透明
  • Filter:alpha(opacity=x)：x值为0~100，值越小越透明

CSS变形

transform

效果：平移、旋转、缩放、倾斜效果

平移函数

translate(tx,ty) ：平移函数，基于X、Y坐标重新定位元素的位置。

  • Tx：X轴（横坐标）移动的向量长度
  • Ty：Y轴（纵坐标）移动的向量长度
  • 只有一个值的时候，表示水平位移；如果想只设置垂直位移，就必须设置第一个参数为0
  • 平移只能移动块元素
  • 如果只想设置一个方向上的位移，还可以使用TranslateX(tx)和TranslateY(ty)

旋转函数

rotate(a)

  • 参数a单位使用deg
  • 取正值时相对原来中心顺时针转

缩放函数

scale(sx,sy) ：可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等。

倾斜函数

skew(ax,ay) ：倾斜的单位为deg(°)

过度

transition ：呈现的是动画转换的过程，单位：s。

过渡功能更像是一种“黄油”，通过一些简单动作触发样式平滑过渡

语法格式：

Transition：[过渡或动态模拟的CSS属性 完成过渡所需要的时间 指定过渡函数 过渡开始出现的延迟时间]

过渡属性

定义转换动画的CSS属性名称。

属性值说明
ident指定CSS属性（width、height等）
all指定所有元素属性

过渡动画函数

指定浏览器的过渡速度，以及过渡期间的操作进展情况。

属性值说明
ease由快到慢(默认值)
linear速度均衡(匀速运动)
ease-in速度越来越快(渐显效果)
ease-out速度越来越慢(渐隐效果)
ease-in-out速度先加速再减速(渐显渐隐效果)

触发机制

  • :hover
  • :active
  • :focus
  • :checked

 

❤️ END ❤️

总结

表单

链接标签

target：_self、_blank

<a href="path" target="目标窗口位置">链接文本或图像</a>

input

<input type="..." name="..." value="..." />

type：text、password、checkbox（复选框）、radio（单选框）、submit、reset（复位）、file、hidden、email、url、、number、range（滑块）、search、image和button，默认为text。

maxlength：type为text 或 password 时，输入的最大字符数

checked：type为radio或checkbox时，指定按钮是否是被选中

step：type为number或range时，合法的数字间隔

**required：**规定文本框填写内容不能为空，否则不允许用户提交表单

**placeholder：**提示语默认显示，当文本框中输入内容时提示语消失

下拉列表框

`

… … `

selected：指定按钮是否是被选中

表格

表格合并：rowspan（跨行）、colspan（跨列）

文本域

<textarea name="showText" cols="x" rows="y">文本内容 </textarea >

媒体元素

controls：提供暂停的按键

autoplay：自动播放

视频：<video src="视频路径" controls autoplay></video>

音乐：<audio src="音频路径" controls></video>

度量

<meter value="3" min="0" max="10">3/10</meter>

CSS

样式：

h1 style="color:red;"></h1>

<style type="text/css">...</style>

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

<style type="text/css">@import url("css/index.css");</style>

文本

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

font: font-style font-weight font-size font-family

背景

边线

border: 1px dashed red;

居中对齐

网页居中对齐：margin:0px auto;

文本水平对齐：text-align: center;

 

❤️ END ❤️
JOEL-T99
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css基础(2)——伪类，浮动，定位
qq_51913153的博客
05-16 731
1.伪类 css伪类表示标签的一种特殊状态，为特殊状态设置属性 格式为 选择器：伪类名 主要分为三类： ：hover 鼠标移入状态 ：active 点击，激活 ：focus 聚焦,对于可输入内容的组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style ...
CSS学习笔记（二）：伪类选择器
Ui_none的博客
04-10 764
伪类选择器 那么就来正式来学习一下伪类选择器，伪类选择器有较多的种类，先来学习一下动态伪类选择器 伪类选择器的语法是在<style>标签后加单冒号，并在单冒号后选择想要修改的样式。 用法： :动作{修改样式内容} 需要注意的是，与伪元素选择器不同，伪类选择器只需添加单冒号而不是双冒号，这是在CSS3开始为进行区分而添加的语法，也就是说，如果编辑的伪元素选择器需要适配CSS1或者CSS2，可以也使用单冒号。 图片来源于鱼C-小甲鱼的网络课程 首先来看动态伪类选择器。 :link、:vis
html+css提示框/弹窗公告实例【记录】
最新发布
PSW_18722821243的博客
07-28 754
【代码】html+css提示框/弹窗公告实例【记录】
css 使用 :placeholder-shown校验空值、提示不能为空
朝阳39的博客
12-16 816
实现原理： 因placeholder内容只在空值状态的时候才显示，所以可以借助:placeholder-shown伪类来判断一个输入框中是否有值。 <template> <div style="padding:30px"> <label for="">短信名称：</label> <input placeholder=" " /> <small></small> <br /> .
前端页面弹框样式
07-10
用jquery实现的，html页面弹出框，提示框样式，包括确认框，提示框，自动消失框等
CSS 样式
JS中字符串的操作
10-24 392
一、什么是CSS 1. CSS ： 层叠样式表 (Cascading Style Sheets)，定义如何显示 HTML 元素，样式通常存储在样式表中。 优先级： 内联样式优先级最高 内联样式（在 HTML 元素内部）>内部样式表（位于 标签内部）>外部样式表>浏览器缺省设置 ...
Dreamweaver小技巧之应用CSS样式表
09-24
在本教程中，我们将探讨两个Dreamweaver中关于CSS样式的实用小技巧：去除超级链接的下划线以及创建可反复使用的外部CSS样式表。 首先，让我们看看如何去除超级链接的下划线并实现鼠标悬停时的变色效果。默认情况下...
Qt css样式大全+详细书签pdf.zip
12-05
本资源"Qt css样式大全+详细书签pdf.zip"包含了丰富的Qt CSS样式的教程和参考资料，旨在帮助开发者深入理解和掌握Qt界面美化技术。 首先，"Qt css样式大全(整理版） - wang13342322203的博客 - CSDN博客.html"是王...
DW在html中插入css样式方法
09-24
Dreamweaver（DW）是一款常用的网页设计工具，它提供了方便的CSS样式插入功能，帮助设计师高效地管理网页样式。下面我们将详细介绍如何在HTML中使用DW插入CSS样式。 首先，我们需要创建一个新的CSS文件。启动...
CSS样式初始化commonInitialize.css
01-18
CSS样式初始化是开发过程中一个重要的步骤，它旨在消除浏览器之间的默认样式差异，确保网页在不同浏览器上的一致性表现。"commonInitialize.css"就是这样一个专门用于全局CSS样式初始化的文件。 首先，我们来理解...
网页中应用CSS样式的多种形式总结
09-22
本文将详细探讨CSS样式的四种主要应用形式：内联样式、内部样式、外部样式以及导入外部样式表。 1. **内联样式**： 内联样式是最直接的方式，它将CSS代码直接放置在HTML元素的`style`属性中。这种做法适用于快速为...
CSS学习之一 CSS样式的引入
12-12
2、type，总是设置为“text/css”，描述了使用link加载的数据类型；3、href，值为样式表的URL，可以是相对的也可以是绝对的；4、media，默认值是“all”，说明样式表要运用于表现的媒体，还有其他取值：aural（用于...
CSS样式重置代码
09-25
主要介绍了CSS样式重置代码，一般保存为reset.css修改了默认的css设置，方便布局与提高浏览器兼容性
CSS样式源码
09-18
HTML5学习的小伙伴走过路过千万不要错过，这个源码是CSS样式，用LINK标签加载之后就可以用了，由于大多数小伙伴在使用时并不需要看样式。所以我上传的是企业开发版（后缀是.min）,如果有需要开发者模式的小伙伴可以...
前端自定义提示框样式之--alert
热门推荐
公主范i 的博客
08-03 1万+
前言：在这个看脸的时代，页面美观固然是跟重要的，系统自带的弹框样式满足不了UI设计的需求，那么只能自己动手做一个了。 公共js代码: //公共提示框 function myalert(str) { var div = '&lt;div class="mark"&gt;&lt;/div&gt;'; $('body').append(div) $('.mark').html(str)...
App页面提示样式小总结
Foreverlemon的专栏
02-21 2525
最近做交互总结，又碰到了页面弹窗提示的问题，于是便总结了下。 我按弹窗提示的样式分为了以下几种来进行说明。每种样式的提示强度不同，对用户在使用app时的打扰与影响也不同。这些提示并不是说哪种好哪种不好，按照自己的规范选择合理的就好。 以下总结，前三个提示的名称是大家习以为常的，但后面几个的命名是以我个人的经验来命的，不一定很合理，但至少可以说明点问题。 Action sheet
web端前端自定义提示语信息
lsk_xs的博客
01-09 1296
当然许多框架里面带的有但自己也要会写（自己写的比较明白吧） 效果图如下 由CSS和JavaScript实现 css代码如下： // 样式 /* 提示语开始 */ @-webkit-keyframes toastAnimation { 0% { opacity:1; } 25% { opacity:0.75; } 50% { opacity:0.5; } 75% { opacity:0.25; } 100% { opacity:0; } } @keyframes toastAnimation {
Dreamweaver深度解析：打造高效CSS样式
"Dreamweaver设计CSS样式" 在网页设计领域，Dreamweaver是一款备受推崇的集成开发环境（IDE），尤其在处理CSS样式方面表现出色。CSS（Cascading Style Sheets）是用于控制网页布局和样式的语言，它使得网页设计者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JOEL-T99

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值