css外观属性文本修饰

最新推荐文章于 2024-05-08 20:34:06 发布

我以为自己很帅

最新推荐文章于 2024-05-08 20:34:06 发布

阅读量327

点赞数

本文链接：https://blog.csdn.net/unlockmyname/article/details/117483610

版权

web前端同时被 3 个专栏收录

39 篇文章 0 订阅

订阅专栏

html5

25 篇文章 0 订阅

订阅专栏

css

22 篇文章 0 订阅

订阅专栏

1.文本颜色

<body>
  <p style="color:#000;">
  <h2 style="color:red;">
  <h1 style="color:#rgb(204,0,1)">
  <h3 style="color:#rgba(204,0,1,.5)">
</body>

文本颜色

#000纯蓝色
#FFF纯白色
#F00纯红色
#0F0纯绿色
#00F纯蓝色

十六进制表示/直接用英文表示/rgb表示,上面见示列.

AABBCC可以缩写成ABC,能缩写的尽量缩写.

0.5 缩写成 .5

2.行间距

<head>
<style>
  p{
   line-height: 24px;   
   line-height: 100%;
   }
</style>
</head>

行间距一般设置当前字体大小+8px,一般默认的字体大小是16 这是目前最好的设置

3.对齐方式

<head>
<style>
   p{
     text-align: center; 
    }
</style>
</head>

center:中心 right:右边 left:左边 a标签不存在居中,首行缩进的概念.

4.首行缩进

 <head>
 <style>   
   p{     <
    text-indent: 2em;
    }
  </style>
  </head>

em相对单位,相对于默认16px 的两倍,相当于两个字节

不提倡但可以无奈的用:text-indent: -999999px; 退进隐藏文本,在做logo 的时候可能用上

5.文本修饰

<stlye>
  a {
   text-decoration: underline;
   text-decoration: none;
   text-decoration: line-through;
    }
</style>

underline:下划线. none:不加任何修饰,清楚下划线 line-through:横穿.

6.总结

  a {
      color: #ff9966;
      font-size: 18px;
      line-height: 26px;
      font-family: "\5B8B\4F53";
      font-weight: bold;
      font-style: italic;
      text-align: center;    这里没用
      text-indent: 2em;       这里也没用
      text-decoration: none;
    }

    p {
      text-align: center;
    }

a标签不存在居中,首行缩进的概念.

7.元素的三种展现形式

块元素
```
<div>    <p>    <h1> a到<h6>     <ol>   <ul>   <dl>   <dt>    <li>
```
- 总是从新行开始,独占一行,高度/行高/内外边距可以设置 ,这决定了可以设置区域
- 宽度默认容器是100%
- 可以放置其他块元素/行内元素