ICode9

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

选择器与css

2021-05-06 17:05:01  阅读:26  来源: 互联网

标签:color border text 标签 margin 选择器 css


 

 

目录

 


回到顶部

一 分组与嵌套

 
div,p,span {  /*逗号表示并列关系*/
            color: yellow;
        }
d1,.c1,span  {
            color: orange;
        }
  回到顶部

二 伪类选择器

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            background-color: black;
        }
        a:link {  /*访问之前的状态*/
            color: red;
        }
        a:hover {  /*需要记住*/
            color: aqua;  /*鼠标悬浮态*/
        }
        a:active {
            color: black;  /*鼠标点击不松开的状态  激活态*/
        }
        a:visited {
            color: darkgray;  /*访问之后的状态*/
        }
        p {
            color: darkgray;
            font-size: 48px;
        }
        p:hover {
            color: white;
        }
        
        input:focus {  /*input框获取焦点(鼠标点了input框)*/
            background-color: red;
        }
    </style>
</head>
<body>
<a href="https://www.jd.com/">小轩在不在?</a>
<p>点我有你好看哦</p>
<input type="text">
</body>
</html>
  回到顶部

三 伪元素选择器

 
p:first-letter {
            font-size: 48px;
            color: orange;
        }
p:before {  /*在文本开头 同css添加内容*/
            content: '你说的对';
            color: blue;
        }
p:after {
            content: '雨露均沾';
            color: orange;
        }
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)
  回到顶部

四 选择器优先级

  1.选择器相同 书写顺序不同,就近原则:谁离标签更近就听谁的

  2.选择器不同 书写顺序不同,行内 > id选择器 > 类选择器 > 标签选择器,精确度越高越有效

回到顶部

五 css属性相关

 
<style>
        p {
            background-color: red;
            height: 200px;
            width: 400px;
        }
        span {
            background-color: green;
            height: 200px;
            width: 400px;
            /*行内标签无法设置长宽 就算你写了 也不会生效*/
        }
</style>
 

  5.1字体属性

 
p {
  /*font-family: "Arial Black","微软雅黑","...";  !*第一个不生效就用后面的 写多个备用*!*/
  /*font-size: 24px;  !*字体大小*!*/
  /*font-weight: inherit;  !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/
  /*color: red;  !*直接写颜色英文*!*/
  /*color: #ee762e;  !*颜色编号*!*/
  /*color: rgb(128,23,45);  !*三基色 数字  范围0-255*!*/
  /*color: rgba(23, 128, 91, 0.9);  !*第四个参数是颜色的透明度 范围是0-1*!*/
  /*当你想要一些颜色的时候 可以利用现成的工具
    1 pycharm提供的取色器
    2 qq或者微信截图功能
    3 也可以多软件结合使用  */
  }
 

  5.2文字属性

 
p {
  /*text-align: center;  !*居中*!*/
  /*text-align: right;*/
  /*text-align: left;*/
  /*text-align: justify;  !*两端对齐*!*/

  /*text-decoration: underline;*/
  /*text-decoration: overline;*/
  /*text-decoration: line-through;*/
  /*text-decoration: none;*/
  /*在html中 有很多标签渲染出来的样式效果是一样的*/
  font-size: 16px;
  text-indent: 32px;   /*缩进32px*/
}
a {
  text-decoration: none;  /*主要用于给a标签去掉自带的下划线  需要掌握*/
}
 

  5.3背景图片

img {
  background-color: green;
  background-image: url("222.png");
  background-attachment: fixed;
}

  5.4边框

 
div {
  border-width: 5px; 边框的宽
  border-style: solid;边框样式:实线
  border-color: green;边框颜色
  随意设置四面的边框
  /*border-left-width: 5px;*/
  /*border-left-color: red;*/
  /*border-left-style: dotted;*/

  /*border-right-width: 10px;*/
  /*border-right-color: greenyellow;*/
  /*border-right-style: solid;*/

  /*border-top-width: 15px;*/
  /*border-top-color: deeppink;*/
  /*border-top-style: dashed;*/

  /*border-bottom-width: 10px;*/
  /*border-bottom-color: tomato;*/
  /*border-bottom-style: solid;*/
  border: 3px solid red;  /*可以连续写,三者位置可以随意写*/
  border-radius: 50%;  /*设置边框4个角的弧度直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
}
 

  5.5 display属性

 
.d1{
  display: none;  隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上
  display: inline; 将标签设置为行内标签的特点
  display: block;  !*将标签设置成块儿级标签的特点*!*/
  display: inline-block;  !*标签即可以在一行显示又可以设置长宽*!
}
 

  5.6 盒子模型

  就以快递盒为例

  快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)

  盒子的厚度(标签的边框 border)

  盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)

  物体的大小(内容 content)

  如果你想要调整标签与标签之间的距离 你就可以调整margin

  浏览器会自带8px的margin,一般情况下我们在写页面的时候,上来就会先将body的margin去除

 
body{
  margin: 0;  上下左右全是0
  margin: 10px 20px;  !* 第一个上下 第二个左右*!
  margin: 10px 20px 30px;  !*第一个上  第二个左右  第三个下*!
  margin: 10px 20px 30px 40px;  !*上 右 下 左*!
}
p {
  margin-left: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin: 0 auto;  /*只能做到标签的水平居中*/
}
p{
  padding-left: 10px;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 50px;

  padding: 10px;
  padding: 10px 20px;
  padding: 10px 20px 30px;
  padding: 10px 20px 30px 40px; /*规律和margin一模一样*/
}
 

  5.7 浮动

  浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大

  只要是设计到页面的布局一般都是用浮动来提前规划好

p{
  float: left;  /*浮动  浮到空中往左飘*/    
  float: right;   /*浮动 浮到空中往右飘*/
}

标签:color,border,text,标签,margin,选择器,css
来源: https://www.cnblogs.com/OUYANGjt/p/14735820.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

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

ICode9版权所有