css基础1

一、css用途和使用方法

    1.主要为网页添加样式,可理解为让网页长成怎么样

    2.三种使用方法:外部 CSS、内部 CSS、行内 CSS

        (1)、外部 CSS

            --通过使用外部样式表,您只需修改一个文件即可改变整个网站的外观!

            --每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="aa.css">
    </head>
<body>
    <h1>外部使用css</h1>

</body>

</html>

        (2)、内部 CSS

            --内部样式是在 head 部分的 <style> 元素中进行定义。

<!DOCTYPE html>

<html>

  <head>

    <style>

    body {

      background-color: linen;

    }

    h1 {

      color: maroon;

      margin-left: 40px;

    }

    </style>

  </head>

<body>

  <h1>内部样式css</h1>

</body>

</html>

        (3)、行内 CSS,也叫内联样式  在元素内用style声明

<!DOCTYPE html>

<html>

<body>

  <h1 style="color:blue;text-align:center;">这是行内样式</h1>

</body>

</html>

二、CSS 语法


    步骤1、选择器指向您需要设置样式的 HTML 元素。这里指向的是h1元素

    步骤2、声明块包含一条或多条用分号分隔的声明。

    步骤3、每条声明都包含一个 CSS 属性名和值,以冒号分隔。

    步骤4、多条 CSS 声明用分号分隔,声明块用花括号括起来。

三、CSS 选择器

   1、 用途:用于选取要设置样式的 HTML 元素。


四、CSS 选择器分类

    1、CSS 选择器分为五类:

        简单选择器(根据名称、id、类来选取元素)

        组合器选择器(根据它们之间的特定关系来选取元素)

        伪类选择器(根据特定状态选取元素)

        伪元素选择器(选取元素的一部分并设置其样式)

        属性选择器(根据属性或属性值来选取元素)

五、简单选择器

    1、id选择器 ----  # 号        特点:唯一

    #aa { text-align:center;color:red;}    


    2、class类选择器   ------  . 号

     .aa { text-align:center;color:red;}    


    3、元素选择器   ------- 每一个特定元素,比对所有p元素设置字体颜色为红色

    p{color:red}

    4、通用选择器   ------- 通用选择器(*)选择页面上的所有的 HTML 元素。

       *{text-align:center;color:red;}

    5、分组选择器    -----   用 ,隔开

    p,div{color:red}   

    .aa,p{color:red}


六、颜色

1、背景颜色: background-color

2、字体颜色:color

3、CSS 颜色值:rgb(255, 99, 71) 或者 #ccc 或者 rgba(0,0,0,0.4)或者颜色名(red、blue等)

颜色取值参考网址:https://www.sioe.cn/yingyong/yanse-rgb-16

七、宽度(width)和高度(height)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.CSS 认识 层叠样式表 Cascading Style Sheets 是用来规定HTML文档的呈现形式,简单...
    陈皮的柚子怪阅读 3,335评论 0 2
  • css:层叠样式表,有叫级联样式表。css分为内联方式,内部样式,外部样式。内联方式:只需要将分号隔开的一个或者多...
    An随心阅读 2,144评论 0 0
  • 1.知识点 CSS初识CSS(Cascading Style Sheets)CSS通常称为CSS样式表或层叠样式(...
    睡到自然醒_52阅读 2,828评论 0 1
  • 1.概念 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素...
    zii4914阅读 1,170评论 0 0
  • 结构 两种方法使用 RGB 值 如果值为若干单词,则要给值加引号 选择器的分组:用逗号分开 继承及其问题 子元素从...
    从此以后dapeng阅读 3,669评论 0 0