CSS

CSS基础

CSS注释

/*这是注释*/

CSS引入方式

1.style标签内部直接书写(为了教学演示方便我们用第一种)
	<style>
        h1  {
            color: burlywood;
        }
    </style>
2.link标签引入外部css文件(最正规的方式 解耦合)
	<link rel="stylesheet" href="mycss.css">
3.行内式(一般不用)
	<h1 style="color: green">老板好 要上课吗?</h1

CSS选择器

通配选择器

* {
    /* 样式块 */
}

标签选择器

div { /* 控制页面中所有div标签的样式 */
    /* 样式块 */
}

class选择器

.box { /* 控制页面中所有标签全局属性class值为box标签的样式 */
    /* 样式块 */
}

id选择器

#box { /* 控制页面中唯一标签全局属性id值为box标签的样式 */
    /* 样式块 */
}

组合选择器

后代选择器：选择什么标签下的什么标签，俩标签中间可以有其他标签
div span{
	color:red
}
儿子选择器：选择什么标签下的什么标签，俩标签中间不能有其他标签
div>span{
	color:red
}
相邻(毗邻)选择器：选择同级别顺序往下紧挨着的第一个标签
div+span{
	color:red
}
兄弟选择器：选择同级别顺序往下的所有标签
div~span{
	color:red
}

属性选择器

[属性名]  选择所有含有该属性名的标签
[属性名=属性值]  选择所有含有该属性名且属性值是这个的标签
标签名[属性名=属性值]  选择所有含有该属性名且属性值是这类标签

分组

/*逗号表示并列关系，选择所有的div，p，span标签*/
div,p,span {  
	color: yellow;
}

伪类选择器

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 
a:active {
  color: #0000FF
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

/*给首字母设置特殊样式*/
p:first-letter {
  font-size: 48px;
  color: red;
}

/*在每个<p>元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}
    
/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
}
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)

选择器优先级

CSS继承的优先级：就近原则:谁离标签更近就听谁的
选择器的优先级：行内 > id选择器 > 类选择器 > 标签选择器（精度越高越有效）

CSS基础样式

字体文本属性

font-family  /*设置字体样式，多个样式的话从前到后选用*/
font-size    /*设置字体大小*/
font-weight    /*设置字体粗细，normal：默认值，等同400，标准粗细；bold：粗体，等同700；bolder：更粗；lighter：更细；inherit：继承父元素字体的粗细；100~900：设置具体的粗细*/
color   /*设置字体颜色，可以直接用英文，也可以用颜色编号，rgb三原色，rgba三原色加透明度
line-height  行高*/
letter-spacing /* 字间距*/
Word-spacing   /*词间距*/
text-indent  /*首行缩进 1em相当于一个字符宽度*/
text-decoration   /*字划线，overline：上划线；line-through：中划线；underline：下划线；none：取消字划线*/
text-align   /*设置文本对齐方式，center：居中；right：右对齐；left：左对齐；justify：两端对齐*/

背景

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

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

边框

border-width  /*边框厚度*/
border-style   /*边框样式 none:无边框;dotted:点状虚线;dashed:矩形虚线;solid:实线*/
border-color   /*边框颜色*/
border-radius  /*边框圆角属性  */
border-radius:50%;  /* 设置为圆形*/

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的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

盒子模型

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

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

内外边距的书写距离是的顺序：上右下左

浮动

浮动：float
- left：向左浮动；right：向右浮动；
清除浮动：clear
- left：左侧不允许有浮动；right：右侧不允许有浮动；both：两侧都不允许有浮动；inherit，继承父类的clear属性值
清除浮动后父类有塌陷问题
- 解决方法一：固定父类的高度
- 解决方法二：利用clear属性
- 解决方法三：伪元素清除法（用的最多）
```
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
```

溢出

overflow: visible;  /*默认值。内容不会被修剪，会呈现在元素框之外。*/
overflow: hidden;   /*	内容会被修剪，并且其余内容是不可见的。*/
overflow: scroll;   /*内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。*/
overflow: auto;     /*如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。*/

overflow     /*水平和垂直均设置*/
overflow-x   /*设置水平方向*/
overflow-y   /*设置垂直方向*/

定位

position

静态（static）
- 所有标签默认都是静态的，无法改变位置
相对定位（relative）
- 相对定位是相对于该元素原来的位置进行移动，并且原本所占的位置不消失（不脱离文档流）
绝对定位（absolute）
- 绝对定位是相对于进行过相对定位的父容器进行移动的，原本所占的位置会消失（脱离文档流）
固定定位（fixed）
- 固定定位是相对于浏览器进行定位的，原本所占的位置会消失（脱离文档流）

z-index模态框

z-index的值表示该层标签从屏幕到我们的距离，越高离我们越近，显示级越高，值低的会被值高的挡住。

opacity

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

opacity:会透明度标签和文字
rgba：只透明度标签

posted @ 2021-08-17 19:12 zheng-sn 阅读(47) 评论(0) 收藏举报

刷新页面返回顶部

zheng-sn

CSS