前端02 CSS选择器与样式设计

橘子菌菌
384 阅读8分钟

css层叠样式表

    1. 调整标签样式
    1. 语法结构
    选择器 {
         属性名1:属性值1;
         属性名2:属性值2;
      }
    1. css的注释语法
     /*注释的内容*/
    1. 编写css的三种方式
    1.head中style标签内部直接编写
2.head中的link标签引入外部css文件 (最正规)
3.直接在标签内通过style属性编写    (不推荐)

css选择器

  • css选择器的分组与嵌套
    • 当多个选择器查找到的标签需要调整相同的样式，就可以合并 
      div,p,span {
     color: red;
     }

<!--合并的选择器没有类型的限制，互不干扰-->
    #d1,.c1,span {
        color: red;
        } 
    
<!--可以在选择器基础上添加额外操作，让查找更精确-->
    span.c1
    div#d1
  • css选择器的优先级
      1. 当选择器相同，引入位置不同时
      • 采用就近原则，标签离哪个样式近就采用哪个样式
      1. 当选择器不同时
      行内 > id选择器 > 类选择器 > 标签选择器
      • 强制修改标签的操作(仅了解即可) 
        div { color: #f00 !important; }

基本选择器

  • 1.(标签选择器)直接编写标签名来查找标签 
    div {
    color: #4400dd    
}
 /*查找所有的div标签，并将内部的文本颜色变为#4400dd(由于选择器优先级原因，只有特别周)*/
  • 2.(类选择器)通过class的值来查找标签 
    .new1 {
    color: #ffdd11
}
/*查找class属性中含有new1的标签，并将内部的文本颜色变为#ffdd11(有草上飞和大树快车)*/
  • 3.(id选择器)通过编写id的值来精准查找标签 
    #name {
    color: green;
}
/*查找id值是name的标签 并将内部的文本颜色改为绿色(有无声铃鹿)*/
  • 4.(通用选择器)查找所有的标签 
    * {
    color: #ff0000
  }
/*查找所有的标签,并将内部的文本颜色改为#ff0000(由于选择器优先级的原因，只有星云天空)*/
  • 代码说明： 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            color: #4400dd
        }
        .new1 {
            color: #ffdd11
        }
        #name {
            color: green;
        }
        * {
            color: #ff0000
        }
    </style>
</head>
<body>
    <div>
        特别周
    </div>
    <div class="new1">
        草上飞
    </div> 
    <p class="new1">大树快车</p>
    <div id="name">
        无声铃鹿
    </div>   
    <p>星云天空</p>
</body>
</html>
    • 结果
      image.png

组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*向head内的style内插入下面的样式*/
    </style>
</head>
<body>
<div id="new1">
    <span>目白麦昆</span>
    <p>
        <span>东海帝皇</span>
    </p>
</div>
<span>美浦波旁</span>
<p></p>
<span>米浴</span>
<span>琵琶晨光</span>
<p></p>
</body>
</html>
  • 后代选择器
    • 查找div标签内部所有的span(后代) 
      #new1 span {
    color : aqua;
}
    • 结果
      image.png
  • 儿子选择器
    • 查找div标签内部所有的儿子span 
      #new1>span {
    color : aqua;
}
    • 结果
      image.png
  • 毗邻选择器
    • 查找div标签同级别下面紧挨着的一个span标签(弟弟) 
      #new1+span {
    color : aqua;
}
    • 结果
      image.png
  • 弟弟选择器
    • 查找div标签同级别下面所有的span标签(弟弟们) 
      #new1~span {
    color : aqua;
}
    • 结果
      image.png

属性选择器

  • 所有的标签除了自己默认的属性之外 还可以自定义的任意属性 
    默认属性       id class
自定义属性     x=1 y=2
    • 1.查找属性名含有name的标签
    [name] {
    background-color: red;
}
    • 2.查找属性名含有name并且值是username的标签
    [name='username'] {
    background-color: orange;
}
    • 3.查找input标签并且 属性名含有name值是username的
    input[name='username'] {
    background-color: aqua;
}
  • 前面的选择器可以是任意类型的 标签、id、class

伪类选择器

a标签默认的颜色有两种 紫色跟蓝色
    紫色:链接地址已经被点击过了
    蓝色:链接地址从来没有点击过
    1. a标签内的文本，鼠标悬浮上去后，颜色发送变化
            /*重要的(鼠标放置上去变色)*/ 
 a:hover {
              color: blue;
          }          
      
       /*不重要的*/
 a:link {      /*未访问的链接颜色*/
              color: red;
          }
          
 a:active {    /*标签被点击的一刻变色*/
              color: green;
          }
          
 a:visited {   /*标签被访问过颜色改变*/
              color: yellow;   
          }

伪元素选择器

  • 通过css代码来操作标签的文本内容
    • first-letter 
      /* 常用的给首字母设置特殊样式：*/
p:first-letter {
  font-size: 48px;
  color: red;
}
    • before 
      p:before {
  content:"*";
  color:red;
}
    • after 
      p:after {
  content:"[?]";
  color:blue;
}
  • 伪元素选择器可以用在解决标签浮动所带来的的负面影响,也可以用来做数据的防爬

css的样式设计

字体样式

块级标签才能设置宽度，行内标签的宽度由内容来决定
  • 宽和高
    • width属性可以为元素设置宽度。
    • height属性可以为元素设置高度。
  • 文字字体 
    body {
   font-family:  "微软雅黑";}
  • 字体大小 
    p {
  font-size: 14px;
}
  • 字的粗细 
    p {
  font-weight:lighter;
}
  • 文本颜色 
      p { 
      color:red;            # 颜色名   
      color:rgb(255,0,0);   # RGB
      color:#3e3e3e;        # 16进制
      color:rgba(1,1,1,0.5) # 最后一个数时0-1之间的小数，表示透明度
  }
  • 文字对齐
    • 设置文字的对齐方式
    p {
    text-align:center;    # 居中
}
  • 文字装饰
    • 添加后文字有特殊效果 
      a {
    text-decoration: none;  # 标准的文本格式
}
  • 首行缩进
    • 将段落的第一行缩进 32像素
    p {
    text-indent: 32px;
}

背景属性

  • 页面的背景色 
    body {
  background-color: lightblue;      # 背景颜色     
  background-image: url('1.jpg');   # 背景图片
  background-repeat: no-repeat;     # 背景展开方式
   # 背景的位置
  background-position: left top;   
  background-position: 200px 200px; 
}
    • 背景的展开方式有四种： 
       repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
  • 背景的属性可以简写 
    body {
   background:#336699 url('1.png') no-repeat left top;
 }

边框属性

  • 边框样式
    • none(无边框)
    • dotted(点状虚线边款)
    • dashed(矩形虚线边框)
    • solid(实线边框)
  • 统一设置边框属性 
    #i1 {
  border-width: 2px;        # 边框宽度
  border-style: solid;      # 边框样式
  border-color: red;        # 边框颜色
}  
     # border-radius 能实现圆角边框的效果，设置为长或高的一般，可以变为圆形
  • 单独为某一个边框设置样式 
      #i1 {
    border-top-style:dotted;
    border-top-color: red;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:none;
  }

display属性

  • 可以控制HTML元素的显示效果 
    display:"none"   HTML文档中元素存在，但是在浏览器中不显示。(隐藏元素)

css盒子模型

  • 盒子模型图示
    image.png
    • 我们可以把盒子模型看作一个快递盒
  • 1.margin 外边距
    • 标签之间的距离 
      可以看作两个快递盒之间的距离
  • 2.border 边框
    • 标签的边框 
      可以看作快递盒的厚度
  • 3.padding 内边距
    • 内部文本与边框的距离 
      盒子内壁与盒子内物体的距离
  • 4.content 内容
    • 标签内部的内容 
      物体自身的大小
  • 有关于标签内边距的设置
    • 设置外边距margin 
      margin-top: 20px;
margin-left: 30px;
margin-rignt: 40px;
margin-bottom: 50px;
 # 当然以上操作可以简写 次序依次是上，右，下，左
margin: 20px 40px 50px 30px; 
 # <body>标签会自带8px的外边距,可以将其取消掉
 margin: 0;
 # 另外对于外边距的书写我们还可以简化
 margin: 10px                   # 上下左右
 margin: 10px 20px;             # 上下  左右
 margin: 10px 20px 30px;        # 上 左右 下
 margin: 10px 20px 30px 40px;   # 上 右 下 左
 # margin还可以让内部标签居中显示
 margin： 100px auto            # 仅限于水平方向的居中
    • 内边距padding的使用方式和外边距margin的使用方式是一致的

浮动布局float

  • float是页面布局不可缺少的操作
    • 让元素浮动起来，再css样式里面添加float 
      float: right/left;
    • 使用浮动之后又及其容易造成父标签塌陷，如果发生了父标签塌陷,使用以下方式解决 
      /*在边框的div标签内的class类选择器和css中使用clearfix类值即可*/
CSS:
    .clearfix:after {
        content: '';
        display: block;
        clear: both;
     } 
 
HTML:
    <body>
    <div class="new0 clearfix">
    <div id="new1">
        <div id="new2"></div>
    </div>
    <div id="new3"></div>
    </div>
    </body>
    • 浏览器对于文本优先展示，元素浮动遮挡文字，会让其优先展示

溢出属性overflow

  • 我们往一个框内写入文字，或插入图片时，会发生这样的现象
    image.png 
    我们会发现插入的图片或文字没有填充在框内，所以此时我们就需要用到溢出
  • 溢出可以使用的值有五个，我们可以根据自己的需求进行添加 
    1. visible       默认的值，没什么帮助
2. hidden        内容被修剪，只能看到一角，一般可以用来制作头像
3. scroll        内容被修剪，但是浏览器会显示翻页键以便查看其它内容
4. auto          如果内容被修剪，可以在浏览器使用滚动来查看其他内容
5. inherit       从父元素继承溢出的属性值
  • 如何设置 
    css内：     
      div {
          height: 80px;
          width: 120px;
          border: 3px solid black;
          overflow: 溢出的属性值;
      }
      div img {
          max-width:100%       /*设置图片为按比例全填充到框内*/
      }
 
html内：
    <div >
        <img src="图片地址" alt="">
    </div>
 /*另外矩形框还可以通过border-radius: 50%;调整为圆形框，将其写入css文件即可*/
  • 调整结束后结果
    image.png

定位position

  • 在css中添加定位 
    position: 定位的方式;
left: 移动的像素值;
top: 移动的像素值;
  • 定位分为四种
    • static(静态)
      • 所有的标签默认都不能直接通过定位修改位置，不能使用left与top，必须切换为其他三种之一
    • relative(相对定位)
      • 相对于标签原来的位置做定位
    • absolute(绝对定位)
      • 基于已经定位过的父标签做定位(没有父标签以body作为参照)
    • fixed(固定定位)
      • 相对于浏览器窗口做定位

z-index

  • 浏览器是一个三维坐标系，z轴指向用户
    • 模态框
  • 使用方法 
    在css中使用z-index，要使一个网页出现底层可以动，展示给用户的不动，这样的效果。
    不动的标签z-index值要大于动的标签，搭配定位一起使用
    • 如图 image.png
avatar
文章
阅读
粉丝