学习CSS之属性

最新推荐文章于 2023-04-02 21:55:30 发布
最新推荐文章于 2023-04-02 21:55:30 发布
阅读量1k 收藏 1
点赞数
分类专栏： Web程序设计 文章标签： css class stylesheet html 浏览器 url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangyang0402/article/details/2244940
版权

一、字体属性
1.font-family:字体族
常用的属性值有：Arial,Courer,宋体
<style type="text/css">
 p.song{
          font-family:宋体;
        }
</style>
2.font-size:字体大小
常用单位为pt(point,磅),px(pixel,像素),有时也可用xx-small,x-small,medium,large,x-large,xx-

large
如：
<style type="text/css">
 p.large{
          font-size:20pt;
        }
</style>
3.font-style:字体样式
属性值有：normal, italic, oblique，其中italic和oblique为斜体，但有些浏览器不支持oblique,建议

用斜体时使用italic

4.font-weight:字体粗细
属性值有：normal(默认值),bold,bolder,lighter

5.color:字体颜色

二、文本属性
1.text-indent:文本缩进
该属性可以指定段落首行的缩进

2.text-align:文本对齐
属性值有：left(默认值),right

3.text-decoration:文本修饰
用于指定文本和横线的关系,属性值有:none(默认值),overline(上划线),line-through(当中划

线),underline(下划线)

4.letter-spacing:字符间距
属性值可设定特定长度,默认值为normal
用于指定文本的颜色

示例:
text.html:

<html>
    <head>
      <title>文本属性演示</title>
      <link href="text_show.css" rel="stylesheet" style="text/css">
     
    </head>
    <body>
     <p class="indent">这是文本缩进,0.5in ,首行缩进</p>
     <p>这是默认对齐方式</p>
     <p class="alignr">这是右对齐方式</p>
     <p>这是普通文本,无文本修饰</p>
     <p class="overline">文本有上划线</p>
     <p class="through">文本中间划线</p>
     <p class="underline">文本有下划线</p>
     <p class="spacing" >字符间距为:0.8in</p>
    </body>
</html>

text_show.css:
p.indent{
          text-indent:0.5in;
        }
p.alignl{
          text-align:left;
        }
p.alignr{
          text-align:right;
        }
p.overline{
            text-decoration:overline;
          }
p.through{
            text-decoration:line-through;
         }
p.underline{
             text-decoration:underline;
           }
p.spacing{
             letter-spacing:0.8in;
         }

三、列表属性
列表样式类型属性为:list-style-type
1.无序列表
属性list-style-type 的常用属性值有：disc(实心圆点),circle(空心圆点),square(实心方块),none


2.有序列表
属性list-style-type的常用属性值有：decimal(阿拉伯数字),upper-alpha(小写字母),lower-alpha(大写

字母),upper-roman(大写罗马数字),lower-roman(小写罗马数字)

四、背景属性
1.background-color:背景颜色属性
该属性用于指定html背景颜色

2.background-image:背景图片属性:
该属性用于指定html背景图片
如：
<html>
   <head>
       <title>背景颜色和背景图片</title>
   </head>
   <body style="background-color:#990012;background-image:url(Images/bg.jpg)">
        <p><font color=#0000ff>现在我们在演示背景颜色和背景图片</font></p>
   </body>
</html>

五、边框属性
1.border-style:边框样式
每个html元素都有一个border-style属性,该属性用于指定元素的内容是否有一个边框,并指定边框的样式.

属性值有:none(默认值),dotted(点线式),dashed(破折线),solid(直线),double(双线),groove (槽线),
ridge(脊线),inset (内嵌),outset (突起)

2.border-width:边框宽度
该属性用来指定上下左右边框的宽度,常用属性值有medium,thin,thick,也可用带长度单位的数字指定.
另外,也可分别指定元素四个边框的宽度,可通过属性border-top-width,border-bottom-width,border-

left-width,border-right-width来设置.

3.border-color:边框颜色
该属性用于指定边框的颜色.元素的四个边框的颜色也可以不相同,可通过属性border-top-color,border-

bottom-color,border-left-color,border-right-color来设置.

六、间隙属性
间隙(padding)用于指定元素内容与其边框之间的距离。
1.padding-left:左间隙属性
用来设置元素内容到左边框的宽度
2.padding-right:右间隙属性
用来设置元素内容到右边框的宽度
3.padding-top:上间隙属性
用来设置元素内容到上边框的宽度
4.padding-bottom:下间隙属性
用来设置元素内容到下边框的宽度

特殊写法：
(1)上下左右间隙相同
.mypadding1{padding:0.1in}

(2)分别设置上下左右间隙(顺序是上，右，下，左)
.mypadding2{padding:0.1in 0.2in 0.3in 0.4in }


七、margin
边距(margin)用于指定元素边框与相邻元素边框之间的距离。
1.margin-left:左边距属性
该属性用于指定左边距的宽度

2.margin-right:右边距属性
该属性用于指定右边距的宽度

3.margin-top:上边距属性
该属性用于指定上边距的宽度

4.margin-bottom:下边距属性
该属性用于指定下边距的宽度

特殊写法：
(1)上下左右边距相同
.mymargin1{margin:0.1in}

(2)分别设置上下左右边距(顺序是上，右，下，左)
.mymargin2{margin:0.1in 0.2in 0.3in 0.4in} 

zhangyang0402
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css学习 css背景相关属性
11-15
css学习 css背景相关属性
详解css counter相关属性学习
01-21
css counter属性被几乎所有浏览器（包括IE8）支持， 但是却不常使用， 这篇文章就带大家学习了解下这些属性 COUNTER-RESET 明译为计数器重置。形如： counter-reset: counter-name 常见写法为 /* Set counter-name to 0 */ counter-reset: counter-name; /* Set counter-name to -1 */ counter-reset: counter-name -1; /* Set counter1 to 1, and counter2 to 4 */ counter-reset: cou
CSS选择器用法笔记
qq_41131274的博客
06-01 175
CSS选择器用法笔记 CSS选择器用法笔记 1、id选择器 2、class类选择器 3、标签选择器 4、属性选择器 5、伪类 6、组合 1、id选择器 用法： #id名称 示例： #idname 示例说明：选择所有id="idname"的元素 2、class类选择器 用法： .class名称 示例： .classname 示例说明：选择所有class="classname"的元素 3、标签选择器 ...
前端部分知识点---CSS
m0_58495313的博客
11-01 245
思想：这是一种分层设计的思想，css把和颜色，大小位置等信息剥离到<style>中，而html只用关心提供什么样的内容就行了。 一、语法：selector{property：value}----即选择器{属性：值} 二、选择器：选择器主要分3种：元素选择器，id选择器，类选择器 <style> p{ color:red; } #p1{ color:blue; } </style> <p>没有id的p</p> <p id="
初识CSS3
2302_77391235的博客
04-02 199
由各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、类选择器、id选择器）都可以作为并集选择器的一部分。例如定义主体元素body的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为其他标签都嵌套在<body>标签中，是<body>标签的子标签。在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，它的权重都为0，即子元素定义的样式会覆盖继承来的样式。用于定义英文单词之间的间距，对中文字符无效，其属性值可以为不同单位的数值，允许使用负值，默认属性值为normal。
CSS选择器
JustinNeil的博客
06-02 181
在CSS中使用选择器来设置特定元素的样式，主要的选择器有： 元素选择器、id选择器、class选择器、分组选择器、嵌套选择器，后代选择器、兄弟选择器、伪类选择器、伪元素选择器，属性选择器 元素选择器 直接以HTML标签作为选择器 <p> This is a paragragh. </p> <style type="text/css"> p{ text-a...
css中indent是什么意思,css文本属性中的text-indent的解析
weixin_33558072的博客
08-04 3251
文字属性text-indent是设置文字首行缩进的，任何元素都可以让首行以给定的长度缩进，长度甚至可以是负数；但只对快元素生效!p{text-align:2em;}这条规则使任何段落的首行缩进2个字符大小。通常，text-indent可应用于任何块级元素，但不能应用于内联元素，也不能用于替换元素，如,但是，如果段落首行有一个图像，那么它将随文本一起移动。text-indent支持负的文本缩进，如p...
css3学习系列之移动属性详解
09-24
主要介绍了css3学习系列之移动属性详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
学习CSS的背景图像属性background
12-11
CSS的背景属性“background”提供了众多属性值，如颜色、图像、定位等，为网页背景图像的定义提供了极大的便利。看看background提供的属性值： background : background-color | background-image | background-...
权威CSS学习笔记！
laizhenghua的博客
01-27 411
CSS学习 1、CSS简介 1.1、关于CSS CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML 4.0中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通 常存储在CSS文件中 多个样式定义可层叠为一个 1.2、HTML的局限性 说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如<h1>表明这是一个大标题，<p>表 明这是一个段落, <i
css属性列表_和_属性值含义
09-17
css属性列表_和_属性值含义，新手可以作为入门参考
获取＜p class=‘demo‘＞hello JavaScript＜/p＞内部文案
Yao_Huang_的博客
09-25 299
const str = "<p class='demo'>hello JavaScript</p>"; const reg = /^\<.+\>(.+)\<.+\>$/; const str1 = str.replace(reg,function (match, $1) { return $1; }); console.log(str1); 捕获组:匹配x并记住匹配项。例如，/(foo)/匹配并记住“foo bar”中的“foo” 正则表达式...
什么是代码缩进(code indent)
Stephen Wong的专栏
03-23 1万+
一个简单的代码缩进(code indent)的样例是： public class A { public static void main() { bool condition = true; if (condition) { System.out.println("The condition is true."); } else { System.out.println
web前端技术之CSS语言基础与页面布局（中）
qq_46007633的博客
03-26 666
主要是属性和伪类伪元素相关的基础知识。常见的样式属性包括文本属性、字体属性、背景属性、列表属性、表格属性、列表属性和分类属性伪类是指处于特殊状态的元素，而伪元素是指元素中特别的内容。
CSS如何将段落的首行缩进两个字符（图文详解）
热门推荐
青颜的天空的博客
02-22 4万+
text-indent属性可实现首行缩进
Python中class的缩进问题
weixin_38083175的博客
12-17 696
Python中的class缩进问题 在Python中，大家都知道函数方法、for循环、if条件语句中，后续包含的内容需要缩进；但是有时候却容易忽略了class下定义的方法相对class的缩进，而导致错误，特此注意。 （PS:第一篇博客，开启博客之路） ...
正则表达式-获取<p class='demo'>hello icketang</p>内部文案
cszhangjie的博客
04-12 1009
function testReg3 () { var str = "&lt;p class='demo'&gt;hello icketang&lt;/p&gt;"; // console.log(str.match(/\bh\w+\s+\b\bi\w+\b/g)); alert(str.match(/\bh\w...
CSS text-indent 属性
笨鸟快飞的专栏
12-31 918
定义 text-indent 属性规定文本块中首行文本的缩进。 注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。 注意：在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值。 说明 用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。 默认值： n
css中visibility属性
最新发布
07-27
- *3* [web前端学习（二十二）——CSS3元素的显示（display）、可见性（visibility）与溢出（overflow）属性的相关...](https://blog.csdn.net/weixin_43823808/article/details/113548969)[target="_blank" data-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值