码迷,mamicode.com
首页 > Web开发 > 详细

CSS基础一

时间:2018-10-25 00:27:41      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:选中文字   round   相同   方式   没有   css基础   开发工具   char   引入   

什么是CSS?

CSS:层叠样式表

网页一层一层的。

而css就可以分别为网页的各层设置样式。

CSS样式编写放在那里?

  1. (内联样式)放在元素的style属性中。给谁设置写在那个标签里面。

    也称为:内联样式,只对当前的元素中的内容起作用。

    内联样式不方便复用,不推荐使用。

    内联样式属于结构与表现耦合,不方便后期的维护,不推荐使用。

    <p style="color:red;font-size:100px;">锄禾日当午,旱地和吓唬</P>
  2. (内部样式)将css样式编写在head中的style标签里,然后通过css选择器选择指定元素,然后可以同时为这些元素一起设置样式,这样可以使样式进一步的复用。

    将样式表编写到style标签中,也可以使表现和结构进一步分类,使表现和结构进一步分离,推荐使用方式。

         <style type="text/css">
             p{
                 color:red;
                 font-size:100px;
             }
         </style>
  3. (外部样式)表

    将样式表编写到外部的css文件中。

    1. 编写外部样式css文件

    2. 引入外部css样式文件到当前html中。

      <!doctype html>
      <html>
        <head>
            <meta charset="utf-8" />
            <title>CSS入门</title>
            <link rel="stylesheet" type="text/css" href="style.css" />
        </head>
      
        <body>
            <p>锄禾日当午,旱地和吓唬</P>
            <p>创建明月光,疑似地上霜</p>
        </body>
      </html>
      1. 将css样式统一编写到外部样式表中,完全使结构和表现完全分离,可以使样式表在不同的页面中使用。
      2. 最大限度是样式复用。
      3. 通过link标签引入,可以利用浏览器的缓存加快用户访问的速度提高用户体验。所以在开发中最推荐的方式是外部样式表。

CSS注释

/*
    注释内容
*/

选择器

通过选择器可以选中页面中指定的元素,并且将声明块中的样式应用到选择器对应的元素上。

声明块

声明块紧跟在选择器的后边,使用对{}括起来,声明块中实际上就是一组一组的明值对结构,这一组一组的明值对我们称为声明。

在一个声明块中可以写多个声明,多个声明之间使用;隔开。声明的样式名和样式值之间使用:来连接

p{
    color:red;
    font-size:100px;
}

开发工具HBulder

推荐使用的开发工具,见官网文档。

div 块元素

  1. 所谓的块元素就是会独占一行的元素。
  2. 无论他的内容有多少,都会独占一整行。
  3. div标签没有任何语义,不会为他里面的元素设置任何的默认样式。
  4. div元素主要用来对网页布局的。
<div style="background-color: red; width: 100px;">one div</div>
        <div style="background-color: blue; width: 100px;">two div</div>

常见块元素

div、p、h1、h2、h3.。。。

内联元素(行内元素)

span:没有任何语义,专门用来选中文字,然后为文字设置样式。

内联元素:只占自身大小,不会占用一行。

常见内联元素

a、img、span、iframe

块元素与内联元素区别

块元素:主要用来布局。

内联元素:主要用来选中文本,设置文本样式。

一般请款告知使用块蒜素去包含内联元素,二不会使用内联元素去包含块元素。

a元素可以包含任意元素

,但是除了它本身。

p元素不能包含任何块元素

常用选择器

  1. 元素(标签)选择器

    作用:可以选择页面中的所有指定元素。

    p{
     color:red;
     font-size:100px;
    }
  2. id选择器

    通过元素的id属性值选中唯一的一个元素。

    语法:

             #p1{
                 color: green;
                 font-size: 300px;
             }
    1. 类选择器

      可以为元素设置class属性,class属性和id属性类似,只不过class属性可以重复。

      用户相同class属性的元素,称为一组元素。

      通过元素的class属性,选中一组元素。

      <!DOCTYPE html>
      <html>
        <head>
            <meta charset="utf-8"/>
            <title>css03</title>
            <style>
                p{
                    color:red;
                    font-size:100px;
                }
                #p1{
                    color: green;
                    font-size: 200px;
                }
                .p1{
                    color:greenyellow;
                }
                .hello{
                    color: #9932CC;
                    font-size: 60px;
                }
            </style>
        </head>
      
        <body>
            <p>ggggg</p>
            <p>ggggg</p>
            <p id="p1">ggggg</p>
            <p class="p1 hello">ggggg</p>
            <p class="p1">ggggg</p>
        </body>
      </html>

      class可以同时为一个元素设置多个class属性值,多个值之间用空格隔开。

  3. 选择器分组

    通过选择器分组可以同时选中多个选择器对应的元素。

    语法:选择器1,选择器2,选中N{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>css03</title>
        <style>
            p{
                color:red;
                font-size:100px;
            }
            #p1{
                color: green;
                font-size: 200px;
            }
            .p1{
                color:greenyellow;
            }
            .hello{
                color: #9932CC;
                font-size: 60px;
            }
            #p1,h1,.p2{
                background: gold;
            }
        </style>
    </head>
    
    <body>
        <h1>fd</h1>
        <p class="p2">fdfd</p>
        <p>ggggg</p>
        <p id="p1">ggggg</p>
        <p class="p1 hello">ggggg</p>
        <p class="p1">ggggg</p>
    </body>
</html>
  1. 通配选择器

    可以用来选中页面中的所有元素

            *{
                color:red;
                font-size: 90px;
            }
  1. 复合选择器(交际选择器)

作用:可以选中同时满足多个选择器的元素

            span.p3{
                color: #00008B;
            }

span与p3中间没有空格。

对id选择器来说,不建议使用复合选择器。

CSS基础一

标签:选中文字   round   相同   方式   没有   css基础   开发工具   char   引入   

原文地址:https://www.cnblogs.com/newcode/p/9846580.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!