CSS系列学习笔记(一)

前端三大件html、css 、javascript

id选择器：唯一的标签,权重最高的

<div id='abc'></div> 只能有一个div id叫abc

类选择器：class 用的比较广范比较多

标签选择器：div{} <div></div> 都会触发这个样式

<style>

选择器{样式:样式值;样式:样式值;样式:样式值;}

</style>

优先级：id>class>标签选择器，下面是三种方式的代码基础展示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>初始css</title>
        <style>
    /* 标签选择器的修饰方式 */
            div{
                width: 200px;
                height: 200px;
                background: black;
            }
            /* id 选择器的修饰方式 */
            #yy{
                width: 200px;
                height: 200px;
                background: blue;
            }
            /* 类选择器的修饰方式 */
            .hanhan{
                background: mediumorchid;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div id='yy'></div>
        <div class="hanhan"></div>

    </body>
</html>

后代选择器：在css中越精准权重越高

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #mydiv p{
        background: green;
      }
    </style>
  </head>
  <body>
    <p>憨憨日常</p>
    <div >
      <p>今天继续加油</p>
      <p>加油加油</p>
    </div>
  </body>
</html>

群组选择器：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>群组选择器</title>
    <style>
      .a1,.a2{
        background:rebeccapurple ;
      }
    </style>
  </head>
  <body>
    <div class="a1">今天天气真好<</div>
    <p class="a1">今天天气真好</p>
    <p class="a1">今天天气真好</p>
    <p class="a2">今天天气真好</p>
    <p class="a2">今天天气真好</p>
    <p class="a1">今天天气真好</p>

  </body>
</html>

css可以给我们html赋值的三种方式：

外链式一般来说优先使用这样的方式

建立一个css文件，然后通过<link />进行外链

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

内嵌式

<style> 
      div{witdth:200px;height:200px;background:black;} 
      /* 选择器{样式:样式值;样式:样式值;样式:样式值;} */ 
   </style>

行内式

<div style="width: 200px;height: 200px;background: yellow;"></div>

三种方式执行层级不同：行内式 > 内嵌式 > 外链式，代码自上而下之行

margin——外边距

margin-left/ margin-right/ margin-bottom/margin-top

margin 可以缩写

margin:4个值上右下左

margin:3个值上左右下

margin:2个值上下左右

margin:1个值上下左右

注意：margin原来的元素大小不发生改变

举例：

width:200px;height:200px;

margin-left:100px;

实际宽度是 200像素

padding-内边距

padding-left/ padding-right/ padding-bottom/padding-top

缩写方式跟margin缩写同理

注意：padding 原来的元素大小发生了改变

border——边框，占元素的大小，是往外长的

border - 缩写样式

border : 大小（10px）实线或者虚线颜色

实线(solid)

虚线(dashed)

颜色(#)(rgb())(red)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>border</title>
    <style>
    .borderNode{
      width: 200px;
      height: 200px;
      background: #ccc;
      border: 10px solid black;
    /* solid 实线边框
       dashed 虚线边框
     border 占元素的大小是往外面长的
     */
    }
    .borderNode2{
      width: 200px;
      height: 200px;
      background: greenyellow;
      border: 10px dashed black;
    }

    </style>
  </head>
  <body>
    <div class="borderNode"></div>
    <div class="borderNode2"></div> 

  </body>
</html>

CSS系列学习笔记(一)

background缩写样式

background-color:背景颜色

background-image:背景图片

background-size:背景图的大小

background-repeat:背景图平铺

no-repeat 不平铺

repeat-x 横坐标平铺

repeat-y 纵坐标平铺

background-position:背景坐标

放两个参数第二个参数默认是center

第一个参数是x轴

第二个参数是y轴

支持 right/bottom/left/top/center的写法

块状元素：可以随意嵌套

div 最基本的块状元素

1.支持宽高 margin、padding

2.width 默认是100% ,独占一行

行内元素：只可以嵌套行内元素

span 最基本的行内元素

1.宽高会随着内容变化而变化

2.支持margin、padding

3.不独占一行

秒客网

CSS系列学习笔记(一)

相关文章