ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

web前端day-05css样式

2021-04-15 20:31:10  阅读:102  来源: 互联网

标签:web color text 选择器 05css css font day red


W3C组成
结构html,表现css,行为javascript
css基本语法
一、 建立与css的联系

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/test1.css">
    
</head>
<body> 

在css里面设置格式

在这里插入图片描述
二、css的四种引入方式
<!-1.嵌入式(行嵌式),写在标签内–>

p style="color:red;font-size: 30px;">欢迎来到羊驼老师课堂</p>

<!-2.内部样式表:一般写在中的title后面,必须将样式包含在中–>

    <style>

        .p2{
            color:blue;
            font-size: 50px;
        }
    </style>
</head>
<body>
<p class="p2">欢迎来到羊驼老师课堂</p>

<!-3.外部样式表:–>

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/p3.css">
   
</head>
<body>
<p class="p3">欢迎来到羊驼老师课堂</p>

<!-4.@import引入–>本质上与第三种相像

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "css/p4.css";

 
    </style>
</head>
<body
<p class="p4">欢迎来到羊驼老师课堂</p>
</body>
</html>

三、css选择器

<style>
        * { /*初始化,盒模型会讲到*/
            padding: 0;  
            margin: 0;
        }
        </style>

1.通配符选择器*匹配所有标签,慎用
2.标签选择器 p div a…

<head>
 <style>
 p {
            color: red;
            font-size: 30px;
        }
 </style>
 </head>
 <body>
<p>欢迎来到羊驼老师课堂</p>        
</body>

3.类选择器

<head>
 <style>
 .p1 {
            color: red;
            font-size: 30px;
        }
 </style>
 </head>
 <body>
<div class="p1">我是p1</div>      
</body>

4.id选择器

<head>
 <style>
 #p1 {
            color: red;
            font-size: 30px;
        }
 </style>
 </head>
 <body>
<p class="p1" id="p1">我是pppppppp</p>
</body>

5.派生选择器:通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。

strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

显示效果:在这里插入图片描述

6.选择器分组

 <style>
/*        .p1{
            color:red;
        }
        .p3{
            color:red;
        }*/

        /*等同于上面的写法:选择器分组,用逗号隔开*/
        .p1,.p3{
            color:red;
        }

    </style>`

7.选择器的继承(.wrapper装饰)

  <style>
      .wrapper{
          width:100%;height: 500px;
      }

        p{ /*p的宽度会继承wrapper*/
            background-color: #f00;
        }

    </style>
</head>
<body>
<div class="wrapper">
    <p>dddddddddddd</p>
</div>
</body>

8.选择期里面元素的优先级

<style>


        (其次是id)#p1{
            color:blue;
        }

        (最后是类).p1{
            color:red;
        }

    </style>
</head>
<body>


<p class="p1" id="p1" style="color: green(里面优先级最高);">我是pppppppp</p>

在这里插入图片描述
例子:

 <style>
        #wrapper div.main h2{
            color:red;
        }
        #wrapper .main h2{
            color:blue;
        }


    </style>
</head>
<body>


<div id="wrapper">
    <div class="main">
        <h2>这是一个h2标题</h2>
    </div>
</div>

在这里插入图片描述
9.补充:元素之间的共用

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .red{
            background-color: red;
        }

        .blue{
            color: blue;
        }




    </style>
</head>

body>
<div class="red blue">我是div</div>

</body>

css字体样式

  p {
            /*font-size: 20px;*/
            /*font-size: 20pt;*/
            font-size: 50%; /*相对于父级元素*/
            font-family: 微软雅黑,华文行楷, 楷体; /*优先顺序排列,前一个没有的,后面的顶上*/
            /*font-style: normal;*/
            /*font-style: italic;*/
            font-style: oblique;
            /*font-weight: bold;*/ /*粗体*/
            /*font-weight: bolder;!*比bold粗*!*/
            /*font-weight: lighter;!*比normal细*!*/
            /*可以通过数字100-900来表示粗细,400等同于normal,700等于bold*/
            font-weight: 100;
            /*color:red;*/
            /*color: #ff0000;*/
            /*color: #f00; !*等同于上面写法*!*/
            color: rgb(255,0,0); /*等同于上面写法*/
            background-color: rgba(0,255,255,0.2);


            /*行高*/
            /*line-height: 40px;*/
            line-height: 5;  /*两倍行高*/



        }
        a{
            /*下划线*/
            text-decoration: none; /*取消下划线*/
            color:#000;  /*黑色*/
        }

        a:hover{  /*悬停时触发*/
            /*text-decoration: underline;*/ /*下划线*/
            /*text-decoration: overline; !*上划线*!*/
            text-decoration: line-through; /*中间穿*/
            color:#f00;
        }


    </style>

css设置对其方式:

<style>
        .p{
            width:400px;
            height:200px;
            text-align: center; /*居中显示*/
            /*text-align: right; !*右对齐显示*!*/
            /*text-align: left; !*右对齐显示*!*/

            line-height: 250px;
            background-color: #f00;
        }

        .td{
            text-align: center;
            vertical-align: top;
        }




    </style>
</head>


<body>

<p class="p">这是一个p</p>


<!--table[border=1]>tr*2>td{dddd$$}*4-->
<table border="1" width="500px" height="200px;">
    <tr>
        <td>dddd01</td>
        <td class="td">dddd02</td>
        <td>dddd03</td>
        <td>dddd04</td>
    </tr>
    <tr>
        <td>dddd01</td>
        <td class="td">dddd02</td>
        <td>dddd03</td>
        <td class="td">dddd04</td>
    </tr>
</table>


</body>

显示效果:在这里插入图片描述

text-transform转换大小写:

<style>
        p {
            text-transform: capitalize;  /*首字母大写*/
        }

        p {
            text-transform: uppercase; /*全部转换为大写*/
        }

        p {
            text-transform: lowercase;  /*全部转换为小写*/
        }

    </style>
    

text-indent首行缩进;

<body>

<!--<p style="text-indent: 40px;">-->

                               <!--字号,斜体,行高 字体形式-->
<p style="text-indent: 2em;font:bolder italic 25px 华文行楷;">记录卡就赶快拉几公里可贷款宫颈癌考虑过
加大卡率较高卡拉胶隔开了
加大卡率较高卡拉胶隔开了
加大卡率较高卡拉胶隔开了
加大卡率较高卡拉胶隔开了
加大卡率较高卡拉胶隔开了
加大卡率较高卡拉胶隔开了

标签:web,color,text,选择器,05css,css,font,day,red
来源: https://blog.csdn.net/weixin_52368930/article/details/115708959

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有