前端基础02 CSS

2024-11-22 技术教程

CSS的几种引入方式行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p >Hello world.</p>内部样式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style></head>外部样式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>CSS选择器基本选择器元素选择器

p {color: "red";}ID选择器

#i1 {background-color: red;}类选择器

.c1 {font-size: 14px;}p.c1 {color: red;}

标签中的class属性如果有多个，要用空格分隔

通用选择器

* {color: white;}组合选择器后代选择器

/*li内部的a标签设置字体颜色*/li a {color: green;}儿子选择器

/*选择所有父级是 <div> 元素的 <p> 元素*/div>p {font-family: "Arial Black", arial-black, cursive;}毗邻选择器

/*选择所有紧接着<div>元素之后的<p>元素*/div+p {margin: 5px;}弟弟选择器

/*i1后面所有的兄弟p标签*/#i1~p {border: 2px solid royalblue;}属性选择器

/*用于选取带有指定属性的元素。*/p[title] { color: red;}/*用于选取带有指定属性和值的元素。*/p[title="213"] { color: green;}分组和嵌套

分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
例如：

div, p {color: red;}嵌套
多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

.c1 p {color: red;}选择器的优先级

同等选择器，越靠近标签的优先级越高（就近原则）

伪类选择器

/* 鼠标移动到链接上 */a:hover { color: #FF00FF} /*input输入框获取焦点时样式*/input:focus { outline: none; background-color: #eee;}伪元素选择器

first-letter
常用的给首字母设置特殊样式：

p:first-letter { font-size: 48px; color: red;}

before

/*在每个<p>元素之前插入内容*/p:before { content:"*"; color:red;}

after

/*在每个<p>元素之后插入内容*/p:after { content:"[?]"; color:blue;}

before和after多用于清除浮动。

CSS属性相关宽和高

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

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

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

字体属性

文字字体、字体大小

body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif}p { font-size: 14px;}

如果设置成inherit表示继承父元素的字体大小值
字重（粗细）
font-weight用来设置字体的字重（粗细）。

值描述bold粗体

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

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

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

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

文字属性

文字对齐

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

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

文字装饰
text-decoration 属性用来给文字添加特殊效果
常用的为去掉a标签默认的自划线：

a { text-decoration: none;}

首行缩进
将段落的第一行缩进 32像素：

p { text-indent: 32px;}

两倍于font-size的设置就是缩进两个字体

背景属性

https://www.cnblogs.com/liwenzhou/p/7999532.html

边框border-radius

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

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

display属性CSS盒子模型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;}

顺序：上右下左

常见居中：

.mycenter { margin: 0 auto;}padding内填充

示例：设置一个列表
效果：

<style> /*取消ul标签前面的标志*/ ul { list-style-type: none; } /*把li标签转成行级标签*/ li { display: inline; } /*把a标签下划线取消，右边框设置1px实线红色，padding上下设置0，左右设置15px*/ li>a { text-decoration: none; border-right: 1px solid red; padding: 0 15px; } /*不显示最后一个li标签的右边框*/ li.last>a { border-right: none; }</style>

<ul> <li><a href="">大米商城</a></li> <li><a href="">小魅商城</a></li> <li><a href="">锤科商城</a></li> <li class="last"><a href="">华为商城</a></li></ul>float

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

浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：

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

三种取值

left：向左浮动

right：向右浮动

none：默认值，不浮动

.c2 { float: left; height: 100px; width: 100px;}clear

clear属性规定元素的哪一侧不允许其他浮动元素。

值描述left在左侧不允许浮动元素。right在右侧不允许浮动元素。both在左右两侧均不允许浮动元素。

clear属性只会对自身起作用，而不会影响其他元素。

举例：解决父标签塌陷，清除浮动

因为c1和c2都是浮动元素，所以撑不起父标签，此时利用伪元素添加一个元素，同事设置清除左侧浮动可以把父标签撑起来，这个伪元素本身不需要有高度

<div id="d1" class="clearfix"> <div class="c1">c1</div> <div class="c2">c2</div></div>

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

圆形头像示例：

<style> .header-img { width: 120px; height: 120px; border: 2px solid silver; /*设置为原型*/ border-radius: 100%; /*如果溢出则隐藏*/ overflow: hidden; } .header-img>img { max-width: 100%; }</style>

<div class="header-img"> <img src="https://s4.51cto.com//oss/201901/03/d4ad6e4650cfe4f35e18a5c76d2af13f.jpg" alt=""></div>

效果：

定位（position）static --> 默认的relative --> 相对定位(相对于原来的位置来说)absolute --> 绝对定位(相对于最近的一个被定位过的祖宗标签) (完全脱离文档流)fixed --> 固定在某个位置(返回顶部按钮)

左右上下
left right top bottom

示例：
返回顶部按钮样式示例

<div class="scrollTop">返回顶部</div>

<style> * { margin: 0; } .fixed-test { /*固定位置*/ position: fixed; /*用右和下定位*/ right: 20px; bottom: 20px; background-color: olivedrab; }</style>脱离文档流补充

脱离文档流的三种方式
float
absolute 绝对定位
fixed 固定定位

z-index数值越大,越靠近你只能作用于定位过的元素

示例：自定义的模态框

<div class="c1"></div><div class="c2"></div>

.c1 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5); z-index: 999;}.c2 { height: 400px; width: 600px; position: fixed; background-color: white; top: 50%; left: 50%; margin-top: -200px; margin-left: -300px; z-index: 1000;}opacity 不透明度

取值0~1
和rgba()的区别:

opacity改变元素\子元素的透明度效果rgba()只改变背景颜色的透明度效果