Web︱CSS

最新推荐文章于 2023-06-28 15:38:40 发布
最新推荐文章于 2023-06-28 15:38:40 发布
阅读量290 收藏 2
点赞数 1
分类专栏： Web 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39595195/article/details/110732277
版权
这篇博客深入介绍了CSS，包括选择器（id、class和元素选择器）、背景属性、文本样式、链接样式、列表样式、表格样式、盒子模型、定位、浮动、对齐等。还涵盖了CSS3的新特性，如渐变、阴影、边框图像、多列布局、弹性盒子和多媒体查询，为网页设计提供了全面的样式控制方法。
摘要由CSDN通过智能技术生成

CSS

简介

  1. CSS，即层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素

  2. 外部样式表可以极大提高工作效率，通常存储在 CSS 文件中。

  3. CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
    在这里插入图片描述

  4. CSS声明总是以分号(;)结束，声明总以大括号({})括起来:

p {color:red;text-align:center;}

  1. CSS注释以 /* 开始, 以 */ 结束。

选择器

1. id选择器

可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器，CSS 中id选择器以 “#” 来定义。

#para1
{
   
   text-align:center;
   color:red;
}

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

2. class选择器

class 选择器用于描述一组元素的样式，在 CSS 中，类选择器以一个点**"."**号显示。
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {
   text-align:center;}

也可以指定特定的HTML元素使用class。在以下实例中, 所有的 p 元素使用class=“center” 让该元素的文本居中:

p.center {
   text-align:center;}

3. 元素选择器

元素选择器通过标签名选择元素。

<style>
p{
   
  color:red;
}
</style>
 
<p>p元素</p>
<p>p元素</p>
<p>p元素</p>

背景

  1. 背景颜色：background-color
  2. 背景图像：background-image

（1）默认背景图像水平或者垂直方向平铺重复显示；

body {
   background-image:url('paper.gif');}

（2）如果图像只在水平方向平铺(repeat-x),则：background-repeat:repeat-x;
（3）取消平铺：background-repeat:no-repeat;
（4）改变图像在背景中的位置: background-position
（5）CSS3允许在元素上添加多个图像

body
{
    
    background-image:url(img_flwr.gif),url(img_tree.gif);
}
  1. background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
  2. 简写属性

body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}
简写时属性顺序：background-color>image> repeat> attachment> position

  1. 背景平铺background-size：contain

通过拉伸实现，会有失真
同时，在CSS3中，background-size可以设置背景图像的大小，可以指定像素或百分比大小。

div
{
   
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}
  1. background-origin 属性指定了背景图像的位置区域。

content-box, padding-box和 border-box区域内可以放置背景图像。
在这里插入图片描述

div
{
   
    background:url(img_flwr.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;
}
  1. 渐变

1）CSS3 定义了两种类型的渐变（gradients）：

  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
  • 径向渐变（Radial Gradients）- 由它们的中心定义

以线性渐变为例，从上到下（默认情况下），语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

//从上到下的线性渐变
#grad {
   
  height: 200px;
  background-image: linear-gradient( red , yellow);
}

//从左到右的线性渐变
#grad1 {
   
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

//从左上角到右下角的线性渐变
#grad {
   
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

2）角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
在这里插入图片描述

//语法
background-image: linear-gradient(angle, color-stop1, color-stop2);

//从右到左：red-->yellow
#grad {
   
  background-image: linear-gradient(-90deg, red, yellow);
}

文本

  1. 文本颜色：color
  2. 文本对齐方式：text-align

当text-align设置为"justify"，为两端对齐

  1. 文本修饰：text-decoration
    overline 上划线
    line-through 删除线
    underline 下划线
    从设计的角度看，text-decoration属性主要是用来删除链接的下划线，不建议强调指出不是链接的文本，因为这常常混淆用户。

  2. 文本转换：text-transform用来指定在一个文本中的大写、小写字母和首字母大写。

（uppercase、capitalize、lowercase）

<style>
p.uppercase {
   text-transform:uppercase;}
p.lowercase {
   text-transform:lowercase;}
p.capitalize {
   text-transform:capitalize;}
</style>
</head>

<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
  1. 文本缩进：text-indent用来指定文本的首行缩进。
  2. 行高：line-height
  3. 字符间距：letter-spacing
  4. 字间距：word-spacing
  5. 垂直对齐：vertical-align
  6. 文本阴影：text-shadow
  7. 文本方向：direction
  8. 空白格：white-space

normal 默认。多个空白格或者换行符会被合并成一个空白格
pre 有多少空白格，显示多少空白格，相当于pre标签，如果长度超出父容器也不会换行。
pre-wrap 有多少空白格，显示多少空白格，相当于pre标签，如果长度超出父容器，会换行。
nowrap 一直不换行，直到使用br

  1. 字体
  • 字体系列：font-family

（1）font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
（2）注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。

  • 字体样式：font-style

如：normal标准字体；italic 斜体

  • 字体大小：font-size

1em的默认大小是16px，通过下面这个公式将像素转换为em：px/16=em

  • 字体粗细：font-weight
  • 字体转变：font-variant

链接

  1. 链接样式

（1）a:link - 正常，未访问过的链接
（2）a:visited - 用户已访问过的链接
（3）a:hover - 当用户鼠标放在链接上时
（4）a:active - 链接被点击的那一刻
当设置为若干链路状态的样式，也有一些顺序规则：

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面

列表样式

  1. 列表项标记list-style-type
<style>
ul.a {
   list-style-type:circle;}
ul.b {
   list-style-type:square;}
ol.c {
   list-style-type:upper-roman;}
ol.d {
   list-style-type:lower-alpha;}
</style>
  1. 列表项图片标记list-style-image
ul
{
   
    list-style-image: url('sqpurple.gif');
}
  1. 列表项标志位置list-style-position

在这里插入图片描述

  1. 列表-简写属性

优先顺序：list-style-type >list-style-position >list-style-image

ul
{
   
    list-style: square url("sqpurple.gif");
}
  1. CSS3多列

CSS3 可以将文本内容设计成像报纸一样的多列布局，有以下几个 CSS3 的多列属性:

  • column-count 需要分割的列数
  • column-gap 列与列间的间隙
  • column-rule-style 列与列间的边框样式
  • column-rule-width 列与列间的边框宽度
  • column-rule-color 列与列间的边框颜色
  • column-rule 是column-rule-* 所有属性的简写
  • column-span 指定元素跨越多少列
  • column-width 指定列的宽度

表格

  1. 表格边框border：1px solid black

image.png

  1. 折叠边框（折叠成一个单一的边框）border-collapse

separate:边框分隔；collapse:边框合并
image.png

盒子模型

  1. 盒子模型

最低0.47元/天 解锁文章
梦晨涌京
关注
专栏目录
web前端学习笔记--css书写位置
weixin_46493903的博客
08-04 602
css 全称 cascading style sheets，层叠式样式表，是一种用来表现 HTML的文件样式的计算机语言。 作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化 css规则：由两个主要的部分组成：选择器、以及一条或多条的声明 p{width：300px;font-size:14px;} 其中，p是选择器，{}里的是多条样式属性，每一条样式属性由属性名：属性值组成 书写位置： 根据书写位置的不同，可以分为内联式、内嵌式、外联式、导入式 内联式(行内式) 书写位置:在
web:Web CSS任务
04-27
Web CSS任务是网页设计中的一个重要...总之，Web CSS任务要求我们具备扎实的CSS基础，理解并掌握布局、响应式设计、动画、预处理器等高级技巧。通过实践，我们可以不断提升CSS技能，创造出更具吸引力和用户体验的网页。
Web-CSS
whale blog
06-08 895
CSS概述     CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。    那么CSS和HTML是如何在网页代码中相结合的呢？通过四种方式：style属性 、style标签、导入和链接。CSS与HT...
Web之CSS
tl2267190799的博客
02-28 730
前端的CSS使用
web前端之CSS样式书写方法
姜大大的博客
03-09 2302
前言
webcss
06-15
webcss应用详解
webcss8PPT教案学习.pptx
10-01
webcss8PPT教案学习.pptx
webcss4PPT教案学习.pptx
10-01
webcss4PPT教案学习.pptx
CSSGalore是基于WebCSS3代码生成器，用于最常用的样式选项。 它使用用户输入生成代码，并实时预览更改。 CSSGalore使用JQuery，CodeIgniter和Materialize Framework编写。 一些功能由剪贴板js和jscolor（JavaScript Colorpicker）提供支持。-JavaScript开发
05-26
CSS GALORE cssgalore.petrovicstefan.rs {CSS GALORE}是基于WebCSS3代码生成器，用于最常用的样式选项。 它使用用户输入生成代码，并实时预览更改。 CSSGalore CSS GALORE cssgalore.petrovicstefan.rs {CSS GALORE...
div+css实现自适应宽度按钮
10-30
div+css实现自适应宽度按钮
标题长度溢出时，自动显示为省略“…”的Css text-overflow
12-13
复制代码代码如下:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”><HTML><HEAD><TITLE> New Document </TITLE><style tyep=”text/css”>.my_css { overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; width:120px; height:20px; font-size:12px;}</style></HEAD><B
css实现一个元素高度固定宽度按比例显示效果
12-14
用padding-top百分比可以实现宽度固定高度按比例展示，现在的需求是对一个video视频的盒子div高度是固定的，宽度如何按比例展示？ 解决后效果如图： 红框标注的即是我在上面高度比例固定的范围内宽度自适应的效果； css代码： .content { margin: 0 auto; height: 79vh; .video_box { position: relative; height: 100%; overflow: hidden; margin: 0 auto;
Bootstrap CSS组件之按钮下拉菜单
08-31
主要为大家详细介绍了Bootstrap CSS组件之按钮下拉菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
判断文字超过2行添加展开按钮，未超过则不显示，溢出部分显示省略号
11-30
在进行H5页面开发时，项目都要提测了，产品却加了个点击展开和点击收起的需求。。 上知乎看了下 ，也有人有这样的疑问，今天我就把问题给解决啦~ 这里就来讲述下我的解决方案： 利用多行溢出实现“展开”“收起” 多行溢出省略Css： overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 设计是这样的。。 点击展开.png 点击收起.png 接下来我来讲讲我的实现 <div class="rev
web开发中怎么样使css书写规范?
sxty0220 博客之家
04-17 765
于现在的web2.0,到底怎么书写css样式表，才算是最好的，最规范的！几乎没有什么明确的规定。在整个开发的项目中，只要写出一套最适合于团队开发的最好了。当然了很多的css样式书写范是大同小异的。需要不断的去归纳总结。 根据经验总结出以下几点规范，请大家参考一下： 一.所有的CSS的尽量采用外部调用:这是我认为最重要的一点,因为这影响加载页面时的速度. 书写时重定义的最先
web基础篇-css
最新发布
weixin_44803968的博客
06-28 1086
【代码】web基础篇-css。
web开发规范 - css书写规范
王佳斌
06-30 6157
基本原则 CSS样式可细分为3类：自定义样式、重新定义HTML样式、链接状态样式。 样式为设计师自定义的新 CSS 样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。样式名 “.”+“相应样式效果描述的单词或缩写”例：“ .shadow ” 文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例：“ .no12 ” 、“ .no12-24 ” 义HTML样式为设计师重新定义...
web——CSS基础
qq_44745063的博客
05-29 1707
作者：小 琛 欢迎转载，请标明出处 文章目录引入方式选择器字体样式文本样式例子1：新闻网页例子2：产品推荐图 css:在web中，用于渲染网页的工具 引入方式 三大引入方式：内嵌、外联、行内 内嵌：在html的head中，定义style，将所有渲染内容写在里面 外联：定义一个.css文件，将所有渲染写在该文件内，在对应的html文件中，link该文件 行间：写在某一个标签内 一般的工程开发多用外联式，这样可以让工程文件看起来清晰；内嵌式通常用于演示等简单操作；行间式在css渲染阶段一般不使用，通
SonarQube Web CSS规则全解析：常见错误与等级指南
这些规则对于维护良好的Web前端代码质量至关重要，通过SonarQube的Web_Css检查，开发者可以及时发现并修复这些问题，提升项目的技术栈稳健性和用户体验。遵循这些最佳实践，可以降低项目维护成本，同时提高网站在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

梦晨涌京

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

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

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

打赏作者

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

抵扣说明：

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

余额充值