CSS3笔记(1)——基础|段落文字|项目列表|背景|表格|渐变

最新推荐文章于 2021-08-03 19:38:06 发布
最新推荐文章于 2021-08-03 19:38:06 发布
阅读量436 收藏 2
点赞数 1
分类专栏： CSS 文章标签： css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43405938/article/details/109480508
版权

一、CSS3基础

1. CSS3基本语法

selector { property1:value1; proterty2:value2; }
/*或*/
selector { 
	property1:value1; 
	proterty2:value2;
}
/*多个选择器使用相同的声明区块*/
selector1, selector2 { 
	property1:value1; 
	proterty2:value2;
}

2. CSS引入方式

  1. 行内样式
 <div style="
      width:100px;
      height:100px;
      background-color: red;
 "></div>
  1. 内部样式表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width:100px;
            height:100px;
            background-color: greenyellow;
        }
    </style>
</head>
</html>
  1. 外部样式表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style>
    	@import url(test.css);
    </style>
</head>
</html>

3. 字体

属性：

  • font-family: 设置字体名称，可指定多个字体名称，用逗号隔开，在前面的字体名称优先级高
  • font-size: 设置字号大小 （1em = 16px）
  • font-style: 设置三种字体样式：normal（正常）italic（斜体）oblique（倾斜体）
  • font-variant: 默认值为normal，值为small-caps时小写英文字母以小型大写字母显示
  • font-weight: 设置字体粗细。有以下取值：normal(400)、bold(700)、bolder、lighter、100, 200, … , 800, 900
  • font-size-adjust: 设置字体宽高比
  • font: 依序设定属性值：style variant weight size family（省略某一项则使用默认值）
  • @font-face: 提供服务器端字体供浏览器下载

4. 属性选择器

用于将具有某种属性，不论其为何值的所有元素套用该样式。

语法

/*所有属性有classname字段的元素，不论classname值为何，均套用该样式，其中*可省略*/
*[classname] {
	...
}
/*为所有属性有classname字段值为value的元素套用该样式*/
*[classname="value"] {
	...
}

5. 虚拟选择器

1.链接虚拟类别 :link 和 :visited

  • :link: 尚未被单击时可以套用该样式
  • :visited: 已被单击时可以套用该样式

2.动作虚拟类别 :hover :active 和 :focus

  • :hover: 鼠标指针位于超链接字符或在此元素上时可以套用该样式
  • :active: 单击时可以套用该样式
  • :focus: 获得焦点时可以套用该样式

3.目的虚拟类别 :target

  • :target: 为移动的目标套用该样式

二、段落文字编排

1. 对齐方式 text-align 属性

text-align: left | right | center | justify | initial | inherit;
  • left: 靠左对齐
  • right: 靠右对齐
  • center: 居中对齐
  • justify: 左右（两端）对齐
  • initial: 使用默认设置
  • inherit: 继承父元素属性

2. 首行缩排 text-indent 属性

text-indent: length | % | initial | inherit;
  • length: 使用cm、px、pt、em等单位设定固定长度，默认值为0
  • %: 缩排父元素宽度的百分比
  • initial: 使用默认设置
  • inherit: 继承父元素属性

3. 行高 line-height 属性

line-height: normal | number | length | % | inherit;
  • normal: 默认值
  • number: 设置数值，将与当前字体尺寸相乘的结果作为行高值
  • length: 使用cm、px、pt等单位设定固定长度
  • %: 设置依照当前字体尺寸的百分比
  • inherit: 继承父元素属性

4. 字符间距 letter-spacing 属性

letter-spacing: normal | length | initial | inherit;
  • normal: 默认值，没有额外空间
  • length: 设值固定的字符间距，可以为负值
  • initial: 使用默认设置
  • inherit: 继承父元素属性

5. 文字间距 word-spacing 属性

word-spacing: normal | length | initial | inherit;
  • normal: 默认值，文字间距为 0.25em（4px)
  • length: 设值额外文字的间距，可以为负值
  • initial: 使用默认设置
  • inherit: 继承父元素属性

6. 处理空格 white-space 属性

white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit;
  • normal: 默认值，浏览器会忽略空白
  • nowrap: 文本不换行，直到遇到 <br> 元素
  • pre: 保留空白，类似于html的 <pre> 元素
  • pre-line: 合并空白符，使文件正常换行
  • pre-wrap: 设定保留空白符，在浏览器中可以正常换行
  • initial: 使用默认设置
  • inherit: 继承父元素属性

7. 大小写转换 text-transform 属性

text-transform: none | capitalize | uppercase | lowercase | initial | inherit;
  • none: 默认值，保留文字原本样式
  • capitalize: 第一个字母大写
  • uppercase: 字母全部转成大写
  • lowercase: 字母全部转成小写
  • initial: 使用默认设置
  • inherit: 继承父元素属性

8. 文字阴影 text-shadow 属性

text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;
  • h-shadow: 水平阴影，右正左负，不可省略
  • v-shadow: 垂直阴影，下正上负，不可省略
  • blur-radius: 模糊范围，单位和h-shadow相同，可省略
  • color: 阴影颜色，可省略
  • none: 默认值，即无阴影
  • initial: 使用默认设置
  • inherit: 继承父元素属性

9. 线条装饰 text-decoration 属性

text-decoration: none | underline | overline | line-through | initial | inherit;
  • none: 默认值，即正常显示
  • underline: 底线
  • overline: 顶线
  • line-through: 删除线
  • initial: 使用默认设置
  • inherit: 继承父元素属性

10. 制表符宽度 tab-size 属性

tab-size: number | length | initial | inherit;
  • number: 设置宽度数值，默认值为8，即8个英文字符宽度
  • length: 设值制表符长度
  • initial: 使用默认设置
  • inherit: 继承父元素属性

11. 换行 word-wrap 属性

word-wrap: normal | break-word;
  • normal: 默认值，只在可以换行的地方换行，否则显示到结束为止
  • break-word: 可用于将较长的单字或URL网址中途换行

12. 溢出 text-overflow 属性

text-overflow: clip | ellipsis | string | initial | inherit;
  • clip: 超出显示区不予显示
  • ellipsis: 超出显示区以“…”显示
  • string: 使用给定的字符串替换被隐藏的文本
  • initial: 使用默认设置
  • inherit: 继承父元素属性

三、项目列表

1. 项目列表符号 list-style-type 属性

默认值： “disc” for <ul> and “decimal” for <ol>
在这里插入图片描述

2. 图片项目符号 list-style-image 属性

list-style-image 属性使用图像来替换列表项的标记。
在这里插入图片描述

3. 项目符号与编号位置 list-style-position 属性

在这里插入图片描述

在这里插入图片描述

4. 简易表示法 list-style 属性

list-style: list-style-type list-style-position list-style-image;

某个属性使用默认值时可省略

四、背景

1. 背景颜色 background-color 属性

background-color: color | transparent | inherit;

在这里插入图片描述

2. 背景图 background-image 属性

background-image: url | none | inherit;

在这里插入图片描述

3. 背景重复出现 background-repeat 属性

默认将图片以左上角为基准点放置

background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | inherit;

在这里插入图片描述

  • space: 设定图片在水平和垂直重复出现时自动调节间距，使图片完整出现
  • round: 设定图片在水平和垂直重复出现时自行重设大小，使图片完整出现

4. 背景位置 background-position 属性

background-position: value;

在这里插入图片描述

5. 背景大小 background-size 属性

background-size: auto | length | percentage | cover | contain | initial | inherit;

在这里插入图片描述

  • auto: 默认选项，以原图大小显示，空间不够时只显示局部
  • initial: 使用默认设置

6. 背景随内容滚动 background-attachment 属性

设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment: scroll | fixed | local | initial | inherit;

在这里插入图片描述

  • local: 效果与scroll相同，但在inframe显示时，背景图不滚动

7. 背景显示区域 background-clip 属性

指定背景绘制区域。

background-clip: border-box | padding-box | content-box;

在这里插入图片描述

8. 背景显示基准点 background-origin 属性

盒子模型左上角为基准点，设定关于background-position属性的相对位置

background-origin: border-box | padding-box | content-box;

在这里插入图片描述

9. 简易表示法 background 属性

background: background-color background-position background-size background-repeat 
			background-origin background-clip background-attachment background-image;

各值之间用空格分隔，不分先后顺序，可以只有其中的某些值

五、表格

1. 表格标题

使用 caption 元素的 caption-side 属性指定表格标题的位置

caption-side: top | bottom | inherit;

在这里插入图片描述

2. 表格底色

实例：

<style>
   th {background-color: aqua;}
   td {background-color: aliceblue;}
</style>

3. 表格框线

实例：

<style>
   table {border: 3px solid blue;}
   th {border: 2px solid green;}
   td {border: 1px solid red;}
</style>

4. 单元格框线

使用 table 元素的border-collapse 属性指定单元格框线模式

border-collapse: separate | collapse | inherit;

在这里插入图片描述
在separate框线模式下，可以使用 table 元素的border-spacing 属性设定单元格与单元格间或单元格与表格间框线的距离

border-spacing: length [length];

在这里插入图片描述

5. 单元格内边距

实例：

<style>
   th {padding: 5px;}
   td {padding: 5px;}
</style>

6. 显示或隐藏空白单元格

使用 table 元素的empty-cells 属性显示或隐藏空白单元格

empty-cells: hide | show | inherit;

在这里插入图片描述

7. 单元格内容排版

可以使用 text-align 属性以不同方式对齐单元格内容

8. 表格版面排版

使用 table 元素的table-layout 属性表格版面排版方式

table-layout: hide | show | inherit;

在这里插入图片描述

9. 设置表格奇偶行不同的样式

使用以下选择器：

n:nth-child(n) /*将设置套用在第n个子元素的p元素*/

则

  • 奇数行：tr:nth-child(2n+1)
  • 偶数行：tr:nth-child(2n)

六、渐变

1. 线性渐变 linear-gardient()

background-image: linear-gradient(direction, color-stop, ... , color-stop);
  • direction: 设定色彩方向，可以用角度或英文表示
    上->下：to bottom | 180deg
    下->上：to top | 0deg
    左->右：to right | 90deg
    右->左：to left | 270deg
  • color-stop: 设定色彩驻停点，可以在颜色后指定位置，如 red 50%，所有百分比之和等于100%

css 不均匀渐变百分比表示指定颜色的标准中心线位置，百分比之间是过渡色，如果百分比位置之间有重叠会失去渐变过渡色。比如：

background: linear-gradient(red 10%, green 85%, blue 90%)

其中：

  • 10% 表示 red 的颜色中心线在线性渐变方向的 10% 的位置。
  • 85% 表示 green 的颜色中心线在线性渐变方向的 85% 的位置。
  • 90% 表示 blue 的颜色中心线在线性渐变方向的 90% 的位置。
  • 10% 到 85% 是 red-green 的过渡色，85%-90% 是 green-blue 的过渡色。

2. 放射渐变 radial-gardient()

默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

background-image: radial-gradient(shape length position, color-stop, ... , color-stop);
  • shape: 设定色彩放射形状，如圆形(circle)、椭圆(ellipse)
  • length: 设定渐变大小，可以通过数值或以下关键词设定渐变大小
    closest-side | farthest-side | closest-corner | farthest-corner：
  • position: 设定渐变中心，可以使用数值、％或以下关键词设定渐变中心
    top | right | bottom | left

3. 重复线性渐变 repeating-linear-gardient()

通过设定其实色彩驻停点与结束色彩驻停点的长度来决定重复的次数。当长度为20%时，渐变重复5次。

4. 重复放射渐变 repeating-radial-gardient()

通过设定其实色彩驻停点与结束色彩驻停点的长度来决定重复的次数。当长度为20%时，渐变重复5次。

阿蓬2023
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
td背景颜色渐变
编程日常记录与总结 https://franciswmf.iteye.com
08-24 213
[align=left][size=large] &nbsp; [/size][/align]
background 渐变
延龙的博客
05-19 306
最近公司项目要求，有个Item 的背景 需要动画渐变效果。 但是我们的item背景 是 drawable background 是 drawable 实现渐变 网上找到 一个类 TransitionDrawable，能达到这个效果 两种代码方式，我用的第一种 一、使用XML 1、这里需要有两个 drawable，这个drawable可以是图片 也可以是自己绘制的，比如我
html中怎样写渐变色代码,html颜色渐变代码 怎样用css实现网页背景颜色渐变
weixin_35353904的博客
05-31 5140
假设有一个td，里边有一个div，就是 首先，打开html编辑器，新建html文件，例如：index.html。在index.html中的标签中，输入css代码： div {width: 200px;height: 150px;background: linear-gradient(red, white);}javascript 如何实现div 颜色的渐变？？假设有一个td，里边有一个div，就是...
html table渐变色,Safari浏览器中的渐变问题（给tr添加的渐变效果作用在了td上）...
weixin_28745309的博客
06-28 621
我想给表格的每一行(tr)增加一个从左到右背景色的渐变,在谷歌浏览器中显示的是正常的,如下图但是在Safari浏览器中，却是每个单元格(td)都显示了渐变的背景色,如下图代码：tr{background-color: #1FA9F4; /* Old browsers */background-image: -moz-linear-gradient(right, red 0%, green 100%...
CSS3使用content属性来插入项目编号
weixin_34351321的博客
09-03 120
首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像，这里我记录的是利用这个content属性来在项目前插入项目编号，同时可以利用content属性在字符串两边加上括号。 1.在多个标题前加上连续编号 <style type="text/css"> h1:before{ content:counter(mycounter...
CSS3笔记1
08-04
【CSS3笔记1】 CSS（Cascading Style Sheets）是一种样式表语言，用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。CSS负责网页的布局和外观，是网页设计中的关键组成部分。 ### CSS的发展历程 自...
黑马基础学习html+css课程笔记和案例
06-29
CSS3新增了许多功能，如渐变、阴影、动画、多列布局、媒体查询等，让网页设计更具动态性和交互性。 在实际项目中，HTML和CSS常常配合JavaScript进行工作，提供交互效果。在“黑马基础学习html+css课程笔记和案例”...
html+css和html5+css3的学习笔记。
06-10
CSS3带来了许多增强视觉效果的新特性，例如阴影（box-shadow和text-shadow）、渐变（linear-gradient和radial-gradient）、边框图像（border-image）、多列布局（column-count和column-gap）、 Flexbox（弹性盒模型...
web前端零基础html5 +css3+前端项目视频教程笔记、源码第一章初识HTML
11-12
6. CSS3新特性：如阴影效果、渐变、动画、多列布局、媒体查询等，这些特性可以增强网页的视觉效果和交互性。 通过本章的学习，你将能够创建基本的静态网页，并具备进一步深入学习JavaScript和其他前端技术的基础。...
HTML5学习笔记（总结提炼版）——002 CSS
03-14
CSS3引入了许多新特性，如多列布局（`column-count`、`column-gap`等）、圆角边框（`border-radius`）、阴影效果（`box-shadow`、`text-shadow`）、过渡效果（`transition`）、动画（`animation`）、渐变（linear-...
Echarts雷达图之样式更改
热门推荐
一只蚊子学Java
03-20 1万+
本篇博文讲述雷达图的使用， 具体各项属性参考下方代码，有相关注释。 var myChart3 = echarts.init(document.getElementById('bbb')); option3 = { radar: [{ indicator: [{ text: '运输单位' ...
简单总结下opacity、transparent以及rgba
weixin_34138255的博客
02-09 649
这几个概念最开始学的时候只是有个大致印象，现在复习这部分的知识点，发现不仔细区分一下，还真有点混乱。 三者共同点是都和透明有关。先分着来说一下： 1、opacity用来设置元素的不透明级别，从 0.0 （完全透明）到 1.0（完全不透明）。 2、transparent是颜色的一种，这种颜色叫透明色。 3、rgba(r,g,b,a)稍复杂一点， r：红色值；g：绿色值；b：蓝色值。三个...
CSS基础知识点快速回忆
我本可以
11-07 193
CSS的语法 CSS的形式 CSS选择器 CSS 三大特性 层叠 继承 优先级 CSS 属性缩写 CSS盒子模型 content padding border margin 外边距合并(外边距凹陷) outline outline-offset position (定位) static relative fixed absolute sticky CSS 浮动 clear 居中 水平居中 垂直居中 水平垂直居中 动画效果 transform 2D&3D变形效果 transition 过渡效果 animati
Html5+Css3实现简单表格排版
isGt93的博客
10-02 2857
1.html5实现初步布局 CS 142 Project 1, Problem 1 --> --> Item Manufacturer Size Unit Price Quantity Total Price Corn Flakes Kellogg's 18 oz. 2.50 1 2.50 Solid White Tuna Starkist 5
【CSS】CSS 处理空白、换行、制表符
z767327552的专栏
03-10 1291
<span>&nbsp;ddd ddd ddd </span> 在html文档中，有此节点，需要展示换行效果，该如何处理才有换行呢？ 1. 使用 < pre > 标签 pre 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 < pre > 开始标签后的换行符也会被省略) pre标签默认样式： pre { display: block;
项目符号css样式,CSS: 项目符号及列表编号颜色
weixin_32081953的博客
08-03 990
彩色列表编号编号列表怎么办？ 它的概念是一样的：因为我们不能用我们自己生成的自动计数器，我们必须更换自动计数器。除了上面的属性，我们还需要创建一个计数器。假设我们使用一个叫做"li"的计数器。我们先把它在OL元素设置为0：ol {list-style: none; counter-reset: li}然后把它当成上面的项目符号一样使用li::before {content: counter(li)...
HTML学习篇（三） 标题，段落和列表
豪阁的个人博客
01-13 2104
下面将分别总结HTML中标题（h1~h6）、段落（p）和列表（ul、ol）的使用。 标题 HTML里面表示标题的是h1、h2、h3、h4、h5、h6标签，通过编写以下代码： &lt;body&gt; &lt;h1&gt;这是标题 1&lt;/h1&gt; &lt;h2&gt;这是标题 2&lt;/h2&gt; &lt;h3&gt;这是标题 3&lt;/h3&gt;
linear-gradient的角度与百分比
trayvontang的博客
06-27 2250
目录一、角度二、百分比三、测试代码 一、角度 垂直向上方向是0度，顺时针方向选中与垂直向上形成的夹角是角度。 注意，标准的语法是不支持起使方向，例如： background: linear-gradient(top, red, blue); 如果要使用起使角度，家私用前缀： background: -ms-linear-gradient(top, red, blue); background: -webkit-linear-gradient(top, red, blue); background: -o
backgroundLinearGradient线性渐变制作折角效果
web前端学习总结
09-28 642
backgroundLinearGradient线性渐变，制作折角效果 语法 线性渐变 - 从上到下（默认情况下） background: linear-gradient(direction, color-stop1, color-stop2, ...); 制作折角效果 background: linear-gradient(45deg, rgb(120, 120, 120) 0%, rgb(1...
css怎么写出|_|
最新发布
05-25
要在 CSS 中写出 |_|，可以使用伪元素 ::before 或 ::after，并设置其 content 属性为 “|_|”，然后再设置其他样式属性来调整其位置和样式。 例如： ``` .content::before { content: "|_|"; display: inline-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值