字体的属性、间距、边框、圆角、超链接

#字体的属性、间距、边框、圆角、超链接

一、#字体属性

1.1 文字颜色 color

颜色的表示有三种方式 （适用于文字，背景）

• 英文单词： red红色 green 绿色 blue蓝色 black黑色 white 白色 pink粉色 purple 紫色

• 十六进制：#584147 #f22a5e 直接去ps里复制这个16进制

  • 纯白色 #ffffff 省略为#fff

• 纯黑色 #000000 省略为#000

• 纯红色 #ff0000 省略为 #f00

• 纯绿色 #00ff00 省略为 #0f0

• 纯蓝色 #0000ff 省略为 #00f

• rgb(25,155,255) 第一个红色 第二个绿色 第三个蓝色 （这三个数字的范围在0-255之间）

  • rgb (0,0,0) 纯黑色

  • rgb（255，255，255）纯白色

  • rgb（255，0，0） 纯红色

  • rgb（0，255，0） 纯绿色

  • rgb（0，0，255） 纯蓝色

  color: rgb(18, 188, 200);     

 div{
            /* 文字颜色 */
            color:red;
        }
​
        p{
            color: green;
        }
        h1{
            color: blue;
        }

1.2 文字大小 font-size

• 浏览器的默认字体大小是16px
• 所支持的最小字体是12px
• 测量文字大小的方法：在ps里量文字的==高度==

   div{
            font-size:24px;
     }

1.3 文字的行高 line-height

• ==一行文字的高度==
• 作用：单行垂直居中 利用行高垂直居中 line-height：和高度一样
• ==多行==文本测量方式：文本测量时 从第一行的上边量到第二行的上边 这就是行高

1.4 ==文本== 的水平对齐方式 text-align

text-align:center;   水平方向对齐
text-align:left;     左对齐（默认值）
text-align:right;    右对齐
text-align:justify;  两端对齐（用于多行文本）

如何让单行文本水平垂直居中？

• text-align:center; 水平居中
  line-height：值和高度一样； 垂直居中

text-align属性 可以让图片水平居中？ (属性加给==父元素==)

 div{
            width: 300px;
            height: 400px;
            background: #666;
            text-align: center;
    }  
​
<!-- div 是父元素   img是儿子 -->
    <div>
        <img src="img/pic.png" alt="">
    </div>
​

二、基础选择器

花括号 左边的  div、p 所处的位置  选择器
​
        选择器{
            样式1；
            。。。
        }
​
        div{
            /* 字体大小 */
           font-size: 30px; 
        }
​
        p{
            color: aqua;
        }

2.1 * 通配符选择器

• 通配符选择器 选中==所有==标签

   *{
            color: red;
            font-size:50px;
            .......
        }
​
   所有标签的文字颜色  都是红色
      去掉所有标签的默认间距 （如果不去掉  会影响布局）
      
      *{
            padding: 0;
            margin: 0;
        }

2.2 标签选择器

直接写标签名

   h2{
            color: pink;
             ....
        }
​
        p{
            color: red;
            ...
        }
        div{
            color: blue;
            ...
        }

2.3 类选择器 class

使用时 abc前加==.== .abc

.abc{
            color: red;
        }    
        .ppp{
            font-size: 40px;
        }
​
        .box{
            color: green;
        }
    
    <div class="abc"> div1 </div>
     <p class="ppp">p4</p>
     <h2 class="box">h2</h2>

==一个类名 可以使用多次==    

.abc{
            font-size: 30px;
            color: red;
        }   
​
    <div class="abc"> div1 </div>
    <div> div2 </div>
    <div> div3 </div>
    <div> div4 </div>
    <p class="abc">p1</p>
    <p>p2</p>
    <p>p3</p>
    <p class="abc">p4</p>

==一个标签可以写多个类名==，中间用空格隔开

    同时会应用多个类名的样式

 <div class="abc box"> div1 </div>
    <div> div2 </div>
    <div> div3 </div>
    <div> div4 </div>
    <p class="abc box">p1</p>       
类名的命名规则：

• 不能以数字开头

• 严格区分大小写

• 不能使用特殊字符（除了- _）

三、居中方式

3.1 text-align：center； 只能让文字和图片居中

3.2 margin：0 auto； 可以让盒子居中

                margin  外间距
                0     垂直方向的间距
                auto（自动）  水平方向的间距

四、圆角属性

            border-radius: 20px;  一个值 代表四周有相同的圆角效果
            border-radius:30px 10px;   第一个值 左上和右下   第二个值右上和左下
            border-radius: 10px 30px 50px; 左上   右上和左下   右下
            border-radius:10px 20px 30px 40px; 左上  右上  右下  左下   

五、边框

 border: 20px solid red;
​
​
border:边框
20px： 边框宽度
solid 边框的线形  （实线）
red   边框的颜色