基础css样式

目录

• css层叠样式表
• css选择器
• 伪类选择器
• 选择器生效优先级
• css字体颜色背景
• 设置宽高
• 边框
• display属性
• div盒子模型
• float漂浮
• 溢出overflow
• 定位（position）
• z-index层叠顺序
• opacity透明效果

css层叠样式表

CSS主要是用来调节html标签的各种样式
'''
思考:页面都是由HTML构成的 并且页面上有很多相同的HTML标签，但是相同的标签在不同的位置可能会有不同的样式 我们如何区分标签

标签的两大重要属性>>>>:区分标签
1.class属性
  分门别类 主要用于批量查找
2.id属性
  精确查找 主要用于点对点

'''
先学习如何查找标签
再学习如何调整样式

1.css语法结构
     选择器 {
       样式名:样式值
       样式名:样式值

     }

2.css注释语法
 /*注释内容*/

3.引入css的多种方式
  head内style标签 内部编写(仅供学习时候使用)
  head内link标签引入 (标准的方式)

  标签内部通过style属性直接编写(不推荐)

css选择器

1.css基本选择器

1.通过标签进行选择
    div {
      color:red;
    }
   p {
     color:#33333
   }
 '这样会直接改变整个标签的样式'   

类选择器 按照标签上的class值来查找标签
.c1 {
   color:green
}
'通过.的方法 查找同一类的标签 统一改变标签的样式'

id选择器 根据标签上的id值 精准的查找到该标签
 #d1 { color:yellow  }
'通过#的方法 查找属于该id的标签 单独改变该标签的样式'

2.CSS组合选择器
  大多数我们的标签都会有互相的嵌套
  例如：
  <p>我是div的兄弟</p>
   <div>
       <p>
       我是div的儿子
       </p>
       <div>
              <p>
                我是div的后代
              </p>
       </div>
   </div>
   <p>我是div的兄弟</p>

 针对标签的上下层以及嵌套有另外的说法
    父标签  后代标签 子标签 弟弟标签 哥哥标签 祖先标签

可以通过关系精确选择

1.后代选择器(空格):
     div span {
  color:red;
  }
# 使用标签名加空格的形式获取

2.儿子选择器(大于号):
   div>p { color:yellow }

3.毗邻选择器(加号)
        div+span {
                color: yellow;
            }
4.弟弟选择器(小波浪号)
        div~span {
                color: yellow;
            }

混合查找
  已,号区分可同时查找多个

  div,p,span { color: red} 多个选择器混合查找

  #di, .c1, span {color:red}
  查找 id为di的标签 和 calss属性为c1 还有 span标签

	div.c1 {  查找class含有c1的div
            color: red;
        }
	div#d1 {  查找id是d1的div
            color: red;
        }
	.c1 p.c2 {  查找含有c1样式值里面的含有c2样式值的p标签
           color: antiquewhite;
        }

4.属性选择器
	/*[username] {*/	按照属性名查找
    /*    color: red;*/
    /*}*/

    /*[username='jason'] {*/  按照属性名等于属性值
    /*    color: yellow;*/
    /*}*/

    div[username='jason'] {
        color: darkcyan;
    }

伪类选择器

5.伪类选择器
	"""a标签补充说明 针对没有点击过的网址 默认是蓝色 点击过的则为紫色"""
	 a:hover {
            color: orange;
        }
    input:focus {  input获取焦点(被点击)之后采用的样式
			  background-color: red;
    }

6.为元素选择器
	     /*p:first-letter {*/
        /*    font-size: 48px;*/
        /*    color: red;*/
        /*}*/
        p:before {		css添加文本无法正常选中
            content: '嘿嘿嘿';
            color: blue;
        }
        p:after {		css添加文本无法正常选中
            content: '呵呵呵';
            color: red;
        }

选择器生效优先级

1.选择器相同 导入方式不同
	就近原则
2.选择器不同 导入方式相同
	内联样式 > id选择器 > 类选择器 > 标签选择器

css字体颜色背景

字体样式
    font-size:14px 24px 28px 36px	字体代码
    font-weight: lighter;     	  字体粗细
    color:三种模式
        /*color: red;*/
        /*color: #3d3d3d;*/
        color: rgb(186,11,98);
    rgba()最后一个参数还可以控制透明度 0~1

    text-align: center		文本居中
	 text-decoration: none;  主要用于a标签取消下划线
   	 text-indent: 32px;		首行缩进
"""
取色器工具
	1.pycharm
	2.截图功能
"""

背景属性
	div {
            width: 800px;
            height: 800px;
            /*background-color: red;*/
            /*background-image: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472");*/
            /*background-image: url("666.png");*/
            /*background-repeat: no-repeat;*/
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/
            /*background-position: center center;*/
            background:  url("666.png") blue no-repeat center center;
        }
	当多个属性名有相同的前缀 那么可以简写一次性完成

设置宽高

宽和高
width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，内联标签的宽度由内容来决定。

边框

#i1 {
  border-width: 2px;
  边框宽度
  border-style: solid;
  边框类型
  border-color: red;
  边框颜色
 }

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

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

display属性

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

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

"""
行内标签是无法设置长宽 只有块儿级可以设置
"""
display:none  彻彻底底的隐藏标签(页面上不会显示 也不会保留标签的位置)
visibility: hidden  隐藏的不彻底

div盒子模型

margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

1.快递包里面的实际物体			 content(内容)
2.物体与内部盒子墙的距离	       padding(内边距、内填充)
3.快递盒的厚度				   border(边框)
4.快递盒之间的距离				  margin(外边距)

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

  常见居中：margin: 0 auto;

float漂浮

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

关于浮动的两个特点：

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

left：向左浮动

right：向右浮动

none：默认值，不浮动

浮动带来的影响
浮动的元素是脱离正常文档流的 会造成父标签塌陷

溢出overflow

值	        描述
visible	   默认值。内容不会被修剪，会呈现在元素框之外。
hidden	   内容会被修剪，并且其余内容是不可见的。
scroll	   内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	     如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	   规定应该从父元素继承 overflow 属性的值。

文字溢出：overflow: hidden;

图片溢出：max-width: 100%;

定位（position）

标签在默认情况下都是无法通过定位的参数来移动
针对定位有四种状态
	1.static静态(标签默认的状态 无法定位移动)
 	2.relative相对定位(基于标签原来的位置)
 	3.absolute绝对定位(基于某个定位过的父标签做定位)
	4.fixed固定定位(基于浏览器窗口固定不动)

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性

脱离文档流：

　　绝对定位

　　固定定位

不脱离文档流：

　　相对定位

z-index层叠顺序

z-index 值表示谁压着谁，数值大的压盖住数值小的，

只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index

从父现象：父亲怂了，儿子再牛逼也没用

opacity透明效果

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明