选择器与css

一分组与嵌套
二伪类选择器
三伪元素选择器
四选择器优先级
五 css属性相关
- 　　5.1字体属性
- 　　5.2文字属性
- 　　5.3背景图片
- 　　5.4边框
- 　　5.5 display属性
- 　　5.6 盒子模型
- 　　5.7 浮动

一分组与嵌套

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>

一、字体属性

文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

body body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

字重（粗细）

font-weight用来设置字体的字重（粗细）。

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

当你想要一些颜色的时候可以利用现成的工具
1 pycharm提供的取色器
2 qq或者微信截图功能

二、文字属性

文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

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

文字装饰

text-decoration 属性用来给文字添加特殊效果。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

   p {
            text-decoration: underline;
            text-decoration: overline;
            text-decoration: line-through;
            text-decoration: none;
        }

需要注意的是text-decoration: none这个属性

看似没用，主要是因为超链接a标签如果不设置的话是自带下划线的，而那些网站一般是不带这个的

所以要用none来清除一下

        a {
            text-decoration: none;  /*主要用于给a标签去掉自带的下划线  需要掌握*/
        }

首行缩进

文章开头都需要空两格，这是从小学开始语文老师就强调的，这里是这样实现的

p {
  text-indent: 32px;
}

三、背景图片

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/

上面的css代码每一句都要background-属性：值

这样很冗余，可以直接一句简写成background：值1 值2...系统会自动匹配值对应的属性的

background:#336699 url('1.png') no-repeat left top;

一个小例子实现前段时间很火的图片不动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #d1 {
            height: 500px;
            background-color: red;
        }
        #d2 {
            height: 500px;
            background-color: green;
        }
        #d3 {
            height: 500px;
            background-image: url("222.png");
            background-attachment: fixed;
        }
        #d4 {
            height: 500px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>

四、边框

边框属性

border-width
border-style
border-color

i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

可以和上面background简写方式一样，省略掉后面的属性

#i1 {
  border: 2px solid red;
}

边框样式

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

border-radius

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

        p {
            background-color: red;

            border-width: 5px;
            border-style: solid;
            border-color: green;

        }
        div {
            /*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;  /*三者位置可以随意写*/

        }
        #d1 {
            background-color: greenyellow;
            height: 400px;
            width: 400px;
            border-radius: 50%;  /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
        }
    </style>
</head>
<body>
    <p>穷人  被diss到了  哭泣.png</p>
<div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子</div>
<div id="d1"></div>
</body>
</html>

五、display属性

用于控制HTML元素的显示效果。

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*#d1 {*/
        /*    !*display: none;  !*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*!*!*/
        /*    display: inline;  !*将标签设置为行内标签的特点*!*/
        /*}*/
        /*#d2 {*/
        /*    display: inline;*/
        /*}*/
        /*#d1 {*/
        /*    display: block;  !*将标签设置成块儿级标签的特点*!*/
        /*}*/
        /*#d2 {*/
        /*    display: block;*/
        /*}*/
        /*#d1 {*/
        /*    display: inline-block;*/
        /*}*/
        /*#d2 {*/
        /*    display: inline-block;  !*标签即可以在一行显示又可以设置长宽*!*/
        /*}*/
    </style>
</head>
<body>
<div style="display: none">div1</div>
<div>div2</div>
<div style="visibility: hidden">单纯的隐藏 位置还在</div>
<div>div4</div>
<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
<!--<span id="d1" style="height: 100px;width: 100px;background-color: red">span</span>-->
<!--<span id="d2" style="height: 100px;width: 100px;background-color: greenyellow">span</span>-->

<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
</body>
</html>

六、盒子模型

盒子模型
就以快递盒为例
快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
盒子的厚度(标签的边框 border)
盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
物体的大小(内容 content)

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

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

margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像。

margin

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

简写

.margin-test {
  margin: 5px 10px 15px 20px;
}

也可以设置一个，两个，三个

body {
            margin: 0;  /*上下左右全是0
            margin: 10px 20px;  /* 第一个上下 第二个左右*/
            margin: 10px 20px 30px;  /*第一个上  第二个左右  第三个下*/
            margin: 10px 20px 30px 40px;  /*上 右 下 左*/
        }

padding

同上

.padding-test {
  padding: 5px 10px 15px 20px;
}

七、浮动float

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

三种取值

left：向左浮动

right：向右浮动

none：默认值，不浮动

<style>
        body {
            margin: 0;
        }
        #d1 {
            height: 200px;
            width: 200px;
            background-color: red;
            float: left;  /*浮动  浮到空中往左飘*/
        }
        #d2 {
            height: 200px;
            width: 200px;
            background-color: greenyellow;
            float: right;   /*浮动 浮到空中往右飘*/
        }
</style>

posted @ 2021-05-06 16:39 欧阳锦涛阅读(46) 评论(0) 收藏举报

刷新页面返回顶部

欧阳锦涛

欧阳锦涛

选择器与css

一分组与嵌套

二伪类选择器

三伪元素选择器

四选择器优先级

五 css属性相关

一、字体属性

文字字体

字体大小

字重（粗细）

文本颜色

二、文字属性

文字对齐

文字装饰

首行缩进

三、背景图片

一个小例子实现前段时间很火的图片不动效果

四、边框

border-radius

五、display属性

六、盒子模型

margin

padding

七、浮动float

三种取值

公告

欧阳锦涛

欧阳锦涛

选择器与css

一 分组与嵌套

二 伪类选择器

三 伪元素选择器

四 选择器优先级

五 css属性相关

一、字体属性

文字字体

字体大小

字重（粗细）

文本颜色

二、文字属性

文字对齐

文字装饰

首行缩进

三、背景图片

一个小例子实现前段时间很火的图片不动效果

四、边框

border-radius

五、display属性

六、盒子模型

margin

padding

七、浮动float

三种取值

公告

一分组与嵌套

二伪类选择器

三伪元素选择器

四选择器优先级