首页 > 其他分享 >41.CSS属性

41.CSS属性

时间：2024-06-12 20:11:53浏览次数：15  
标签：CSS3 CSS1 定义 元素 指定 41 边框 CSS 属性

【一】CSS属性

1）长度和宽度

属性 版本 继承性 描述
width CSS1 无 定义了元素内容区（Content Area）的宽度
min-width CSS2 无 定义了元素内容区（Content Area）的最小宽度
max-width CSS2 无 定义了元素内容区（Content Area）的最大宽度
height CSS1 无 定义了元素内容区（Content Area）的高度
min-height CSS2 无 定义了元素内容区（Content Area）的最小高度
max-height CSS2 无 定义了元素内容区（Content Area）的最大高度 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*【一】高度与宽度*/
        p {
            height: 200px;
            width: 200px;
            background-color: greenyellow;
        }
        span {/*块级标签无法设置高度与宽度*/
            height: 200px;
            width: 200px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>

<h1>高度与宽度</h1>
<p>p标签</p>
<span>span标签</span>

</body>
</html>

2）字体属性

属性 版本 继承性 描述
font CSS1/2 有 简写属性。定义元素的文本特性
font-style CSS1 有 指定元素的文本是否为斜体
font-variant CSS1 有 定义元素的文本是否为小型的大写字母
font-weight CSS1 有 定义元素文本字体的粗细
font-size CSS1 有 定义元素的字体大小
font-family CSS1 有 定义元素文本的字体名称序列
font-stretch CSS3 有 定义元素的文字是否横向拉伸变形
font-size-adjust CSS3 有 定义小写字母x的高度与对象文字字号的比率。
font-style
  • normal：指定文本字体为正常字体
  • italic：指定文本字体为斜体（取字体的斜体写法）
  • oblique：指定文本字体为斜体的字体（人为使字体变斜体）
font-variant
  • normal：正常字体
  • small-caps：小型的大写字母字体
font-weight
  • norma：正常字体粗细，400
  • bold：粗体，700
  • bolder：定义比继承值更高的值
  • lighter：定义比继承值更轻的值
  • <integer>：用数字表示字体单独粗细，整数
    • 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-size
  • <absolute-size> ：根据对象字号进行调节。
    • xx-small | x-small | small | medium | large | x-large | xx-large
  • <relative-size>：相对于父对像中字号进行相对调节。
    • smaller | larger
  • <length>：用长度值指定文字大小。不允许负值
    • 10px
  • <percentage>：用百分比指定文字大小。不允许负值
  • 200%
font-family
  • <family-name>：字体名称，按优先顺序排列，以逗号隔开，若字体名称包含空格或中文，须引号括起
    • "楷体" | "宋体"
  • <generic-family>：字体序列名称
    • cursive | fantasy
font-stretch
  • normal：正常字体宽度
  • ultra-condensed：比正常字体宽度窄4个基数
  • extra-condensed： 比正常文字宽度窄3个基数
  • condensed： 比正常文字宽度窄2个基数
  • semi-condensed： 比正常文字宽度窄1个基数
  • semi-expanded： 比正常文字宽度宽1个基数
  • expanded： 比正常文字宽度宽2个基数
  • extra-expanded： 比正常文字宽度宽3个基数
  • ultra-expanded： 比正常文字宽度宽4个基数

3）文本属性

1.文本

属性 版本 继承性 描述
text-transform CSS1/3 有 定义元素的文本如何转换大小写
white-space CSS1 有 指定元素是否保留文本间的空格、换行；指定文本超过边界时是否换行。
tab-size CSS3 有 定义元素内容中制表符的长度
word-break CSS3 有 定义元素内容文本的字间与字符间的换行行为
word-wrap/overflow-wrap CSS3 有 定义元素内容文本遇到边界时如何换行
text-align CSS1/3 有 定义元素内容的水平对齐方式
text-align-last CSS3 有 定义块内文本内容的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式
text-justify CSS3 有 定义使用什么方式实现文本内容两端对齐
word-spacing CSS1/3 有 指定单词之间的额外间隙
letter-spacing CSS1/3 有 指定字符之间的额外间隙
text-indent CSS1/3 有 定义块内文本内容的缩进
vertical-align CSS1/2 无 定义行内元素在行框内的垂直对齐方式
line-height CSS1 有 定义元素中行框的最小高度
text-size-adjust CSS3 有 定义移动端页面中元素文本的大小如何调整
text-transform
  • none：无转化
  • capitalize：将每个单词的第一个字母转大写
  • uppercase：将每个单词转大写
  • lowercase：将每个单词转小写
  • full-width：将所有字符转fullwidth形式
text-align：
  • left：内容左对齐
  • center：内容中对齐
  • right：内容右对齐
  • justify：内容两端对齐，但对于强制打断的一行及最后一行不做处理
  • start：内容对齐开始边界
  • end：内容对齐结束边界
  • math-parent：这个值和inherit表现一致，只是该值继承的start或end关键字是针对父母的direction值并计算的，计算值可以是 left 和 right 。（CSS3）
  • justify-all： 效果等同于justify，不同的是最后一行也会两端对齐。（CSS3）

2.文本装饰

属性 版本 继承性 描述
text-decoration CSS1/3 无 简写属性。定义元素文本装饰
text-decoration-line CSS3 无 定义元素文本装饰线条位于文本的哪个位置
text-decoration-color CSS3 无 指定元素文本装饰线条的颜色
text-decoration-style CSS3 无 定义元素文本装饰线条的形状
text-decoration-skip CSS3 有 定义元素文本装饰线条必须跳过内容中的哪些部分
text-underline-position CSS3 有 定义元素装饰线的位置
text-shadow CSS3 有 定义文字是否有阴影及模糊效果
text-decoration
text-decoration-line
  • none：指定文字无装饰
  • underline：指定文字装饰 下划线
  • overline：指定文字装饰 上划线
  • line-through：指定文字装饰 删除线
  • blink：指定文字装饰 闪烁
text-decoration-color
  • <color>：指定元素文本装饰线条的颜色
text-decoration-style
  • solid：实现
  • double：双线
  • dotted：电状线条
  • dashed：虚线
  • wavy：波浪线
text-shadow
  • none：无阴影
  • <length_1 length_2 length_3 color>:水平偏移值（可为负），垂直偏移值（可为负），模糊值（不可为负），阴影颜色
    • -10px 20px 3px red

4）背景属性

属性 版本 继承性 描述
background CSS1/3 无 简写属性。定义元素的背景特性
background-color CSS1 无 定义元素使用的背景颜色
background-image CSS1/3 无 定义元素使用的背景图像
background-repeat CSS1/3 无 定义元素的背景图像如何填充
background-attachment CSS1/3 无 定义滚动时背景图像相对于谁固定
background-position CSS1/3 无 指定背景图像在元素中出现的位置
background-origin CSS3 无 指定的背景图像计算background-position时的参考原点(位置)
background-clip CSS3 无 指定对象的背景图像向外裁剪的区域
background-size CSS3 无 定义背景图像的尺寸大小
background-image
  • none：无背景图
  • <image>：使用绝对路径、相对路径或自创渐变色确定图像
    • url（'01.jpg'）
background-repeat

  • repeat：水平和垂直平铺

  • no-repeat：不平铺

  • repeat-x：水平平铺

  • repest-y：垂直平铺

  • round：不能以整数次平铺时，会根据情况缩放图像

  • space：不能以整数次平铺时，会用空白间隙填充在图像周围

background-position

  • <percentage>：用百分比指定背景图像在元素中出现的位置，可为负数

    • -50%

  • <length>：用长度指示背景图像在元素中出现的位置，可为负数

    • 200px

  • center：背景图像横向和纵向居中

  • left：背景图像从左边开始出现

  • right：背景图像从右边开始出现

  • top：背景图像从顶部开始出现

  • bottom： 背景图像从元素底部开始出现

background-size

  • <length>：用长度指定背景图像大小，不可为负值

    • 200px

  • <percentage>：用百分比指定背景图像大小，不允许负值

    • 50%

  • auto：背景图像的真实大小

  • cover：将背景图像等比例缩放到完全覆盖容器，背景图像有可能超出容器

  • contain：将背景图像等比例放到宽度或高度与容器相等，背景图像始终在容器内

5）边框属性

属性 版本 继承性 描述
border CSS1 无 简写属性。定义元素边框的外观特性。参阅outline属性
border-width CSS1 无 简写属性。定义元素的边框厚度
border-style CSS1 无 简写属性。定义元素的边框样式
border-color CSS1 无 简写属性。定义元素的边框颜色
box-shadow CSS3 无 定义元素的阴影
border-radius CSS3 无 简写属性。定义元素的圆角
border-image CSS3 无 简写属性。定义将图像应用到元素的边框上
border-image-source CSS3 无 定义元素边框样式所使用的图像。
border-image-slice CSS3 无 用以指定从哪 4 个位置分割图像（遵循上右下左的顺序）
border-image-width CSS3 无 定义元素边框图像的厚度
border-image-outset CSS3 无 定义边框图像从边框边界向外偏移的距离
border-image-repeat CSS3 无 定义分割图像怎样填充边框图像区域
border-width
  • <length>：用长度来定义边框的弧度，不可为负值
  • medium：默认厚度边框，3px
  • thin：默认细边框，1px
  • thick：默认厚边框，5px
border-style
  • none：无边框
  • hidden：隐藏边框
  • dotted：点状边框
  • dashed：虚线边框
  • solid：实线边框
  • double：双实线边框
  • groove：3D凹槽边框
  • ridge：3D凸槽边框
  • inset：3D凹边边框
  • outset：3D凸边边框
box-shadow

  • none：无阴影

  • <length_1 length_2 length_3 length_4 color>:水平偏移值，垂直偏移值，模糊值半径，阴影外延值，阴影颜色

    • 20px 20px 10px 3px red

  • inset：定义阴影为内阴影

border-radius
  • <length>：用长度定义圆形半径或椭圆的半长轴
    • 20px
  • <percentage>：用百分比定义圆形半径或椭圆的半长轴
    • 30%

6）display属性

属性 版本 描述
none 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline 指定对象为内联元素
block 指定对象为块元素
list-item 指定对象为列表项目
inline-block （CSS2） 指定对象为内联块元素
table （CSS2） 指定对象作为块元素级的表格。类同于html标签
inline-table （CSS2） 指定对象作为内联元素级的表格。类同于html标签
table-caption （CSS2） 指定对象作为表格标题。类同于html标签
table-cell （CSS2） 指定对象作为表格单元格。类同于html标签
table-row （CSS2） 指定对象作为表格行。类同于html标签
table-row-group （CSS2） 指定对象作为表格行组。类同于html标签<tbody
table-column （CSS2） 指定对象作为表格列。类同于html标签
table-column-group （CSS2） 指定对象作为表格列组显示。类同于html标签
table-header-group （CSS2） 指定对象作为表格标题组。类同于html标签
table-footer-group （CSS2） 指定对象作为表格脚注组。类同于html标签
run-in （CSS3） 根据上下文决定对象是内联对象还是块级对象。
box （CSS3） 将对象作为弹性伸缩盒显示。（伸缩盒最老版本）
inline-box （CSS3） 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）
flexbox （CSS3） 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）
inline-flexbox （CSS3） 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）
flex （CSS3） 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）
inline-flex （CSS3） 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）

标签：CSS3,CSS1,定义,元素,指定,41,边框,CSS,属性
From： https://www.cnblogs.com/Mist-/p/18244617

相关文章

  • 中望ZW3D 二次开发 输出质量、体积等属性 cvxPartInqShapeMass
    svxPointP1={10,0,0};svxPointP2={20,0,0};svxPointP3={20,10,0};svxPointP4={10,10,0};intL1;cvxPartLine2pt(&P1,&P2,&L1);intL2;cvxPartLine2pt(&P2,&P3,&L2);intL3;cvxPartLine2pt(&P3,&P4,&......
  • js之操作元素属性和定时器以及相关案例倒计时
    这里写目录标题一级目录二级目录三级目录WebAPIs01四、操作元素属性1.操作元素常用属性2.操作元素样式属性通过style属性操作css1.修改样式通过style属性引出2.如果属性有-连接符，需要转换为小驼峰命名法3.赋值的时候，需要的时候不要忘记加css单位通过className操作css......
  • Tailwind CSS 实战指南：快速构建响应式网页设计
    title:TailwindCSS实战指南：快速构建响应式网页设计date:2024/6/12updated:2024/6/12author:cmdragonexcerpt:这篇文章介绍了TailwindCSS框架的特点与优势，包括其作为实用性的CSS框架如何通过预设的样式类实现快速布局和设计，以及如何在不牺牲响应式和自适应性的同时......
  • http 响应415状态码
    http响应415状态码现象$bashuat-gray-id.sh{"timestamp":"2024-06-1213:55:25","status":415,"error":"UnsupportedMediaType","message":"","path":"/ecommerce"}脚本内容$cat......
  • Android property属性权限添加
    https://blog.csdn.net/qq_28648425/article/details/86691949Google在AndroidO以后,为了降低vendor和system之间的耦合度,对property的作用区域也做了明确的区分,分为vendor三方的property和system平台端的property.因为参与的项目中需要添加一个systemproperty用作三方应用的......
  • CSS 遮罩层
    html<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="basic.css"></head><body><divclass="masked-element"><divclass="content">这里是需要遮罩的内容</div>......
  • 20_CSS_ 字体大小
    上面的代码还涉及继承与优先级的内容，不懂得可以参照：16_CSS_选择器的优先级_简单聊18_CSS_CSS三大特性这里简单说一下，为什么在不设置字体大小的情况下，使用不同浏览器打开时，显示的字体大小不一样：因为不同浏览器默认字体大小不一样。当设置字体小于浏览器默认字体大小或者不......
  • HTML+CSS+JS 倒计时动画效果
    1.整体效果https://mmbiz.qpic.cn/mmbiz_gif/iaVb9cSjKNDeLc7vbAUXJ4yFicKsd2d94ibVgYMJYz3frKeib1tibZhf78kc70gVp9EoqQw16Xzia6OialDaibic9o4iaMfg/640?wx_fmt=gif&from=appmsg&wxfrom=13&tp=wxpic实现了一个倒计时动画效果，包括数字区域和倒计时结束区域。数字区域显......
  • Web应用课 第二讲 CSS定义方式、选择器、颜色
    定义方式行内样式表：只作用在单个元素<!--CSS定义方式1：行内样式表--><imgsrc="/static/images/mountain.jpg"alt="山1"width="300"><imgsrc="/static/images/mountain.jpg"alt="山2"style="width:30%;&quo......
  • 【现代 CSS】标准滚动条控制规范 scrollbar-color 和 scrollbar-width
    Chrome在121版本开始，原生支持了两个滚动条样式相关的样式scrollbar-color和scrollbar-width。要知道，在此前，虽然有::-webkit-scrollbar规范可以控制滚动条，可是，::-webkit-scrollbar是非标准特性，在MDN文档中都明确了不应该在生产环境使用它。MDN-::-webkit-scrollbar......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99