327 心得体会

AM

今天的东西不算难 CSS样式嵌入

1行间 嵌入 span 

2内嵌

id选择器 class选择器 元素选择器 
还有他们的关系
并列 和 父子

3外部引入

<link rel="stylesheet" href="style.css"/>



 1 <title></title>
 2         <link rel="stylesheet" href="style.css"/>
 3         <style>
 4             /* id选择器*/
 5             #p1{
 6                 color:red;
 7                 font-weight: 500;
 8             /*class选择器*/
 9             .pp{
10                 color: blue;
11                 font-size: 80px;
12             /*元素选择器*/    
13             span{
14                 color:yellow;
15                 font-size: 80px;
16             /* 父子关系 */
17             #p1 .pp{
18                 color: blue;
19             }
20         </style>
21     </head>
22 <!--CSS样式嵌入：
23 1.行间样式：在标签中添加style属性
24      格式：style="样式1：样式值；样式2=样式值2"(！注意！)
25 2.内嵌样式：在head标签中+一个 <style></style>,将样式写在其中
26     选择器：需要给标签设置id属性或class属性
27     1.id选择器：必须给标签设置id属性
28     例：id="s1"
29     <style>
30     #s1{
31         样式1：样式值1；
32         样式2：样式值2
33     }
34     </style>
35     2.class选择器：必须给标签设置class属性
36     class:理解为 代表的是一类
37     例：class="pp"
38     <style>
39     .pp{
40         样式1：样式值1；
41         样式2：样式值2
42     }
43     ！！！注意：id是用"#"表示" class用"."表示
44     3.元素(标签)选择器：
45      <style>
46      元素（标签）{
47              样式1：样式值1；
48              样式2：样式值2
49         }
50      </style>
51     选择器之间的关系：
52     1.并列关系：
53     选择器1,选择器2{
54         样式1:样式值1；
55         样式2：样式值2
56         }
57     2.父子关系：理解为在标签例的子标签的关系
58     选择器1 选择器2{
59         样式1：样式值2；
60         样式2：样式值2
61         }
62     选择器之间优先级：
63       id选择器>class选择器>元素选择器
64     3.外部引入：
65     新建 xxx.css文件
66     在html文件中的head标签中，引入css文件
67     格式：<link href="css文件路径">
68     整个style格式都可以放到css样式里面
69     
70 -->
71     <body>
72         <!--<span></span>:无功能，用于包裹文字，给文字添加样式-->
73         <span style="color:#;font-size: 60px;">你好</span>
74     <p id="p1" class="p2">这是一个段落标签</p>
75     <p id="p1" class="pp">这是一个段落标签</p>
76     <p id="p1" class="p2">这是一个段落标签</p>
77     <p id="p1" class="pp">这是一个段落标签</p>
78     <span>span1</span>
79     <span>span2</span>
80     <span>span3</span>
81     <!-- 父子关系 -->
82     <p id="p1">
83         aaaasdasd
84     <span class="pp">rgwrgffff</span>
85     <span class="pp">gfrgrgrgrg</span>
86     <span class="pp">ddddddddddddddddd</span>
87     </p>

 

PM

字体样式

文字样式和文本样式

text的属性

<!-- 字体样式 ：只要标签中有font就是文字样式-->
    <style>
        #s1{
        font-family:宋体;
        font-size: 60px;
        font-weight: bold;
        font-style: italic;
        color: #FF0000;
    }
    #p1{
        /* 下划线 */
        text-decoration: underline;
        /* 删除线 */
        text-decoration: line-through;
        /* 顶划线 */
        text-decoration: overline;
        /* 转换大写 */
        text-decoration: uppercase;
        /* 所有单词首字母转大写 */
        text-transform: capitalize;
        /* 首行缩进 */
        text-indent: 30px;
        /* 文本对齐：左中右 */
        text-align: center left right;
        /* 行高 */
        line-height: 20px;
        /* 背景色 */
        background-color: #FF0000;
    }
    </style>
    </head>
    <body>
        <table height="30%" width="30%"></table>
        <span id="s1">这是一个span标签</span>
        <p id="p1">这是一个P标签hello world</p>

 

posted @ 2019-03-27 15:22  zhansen521  阅读(217)  评论(0)  编辑  收藏  举报