CSS
前端(css)
css介绍:
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
相当于给页面穿上一层衣服
每个css样式由两个部分组成:选择器和声明. 声明又包括属性和属性值. 每个声明之后用分号结束
例:
css的三种引入方式
行内样式:例:
内部样式:
嵌入式是将css样式集中写在<head></head>标签对<style></style>标签对中
例:
外部样式
外部样式就是将css写在一个单独的css文件中,然后在页面进行引入. 推荐使用此方式
例: 引入:
基本选择器
id选择器
<style>里的写法
内容:
<body>里的写法
类选择器
例:
<style>里的写法
<body>里的写法
标签选择器
例:
<style>里的写法
<body>里的写法
通用选择器
例: (让所有的内容都改变颜色)
<style>里的写法
<body>里的写法
组合选择器
后代选择器<style>里的写法
<body>里的内容
div标签里面的span标签是后代
儿子选择器(所有父级都是#d1的span标签)
毗邻选择器(选择所有跟在p标签后的span 标签)
弟弟选择器(p标签后的所有兄弟 span 标签)
属性选择器
用于选取带有指定属性的元素(指定元素s14)
<style>里的写法
<body>里的写法
分组
当多个元素的样式相同时,没有必要给每个元素都设置样式,可以通过在多个选择器之间用逗号分隔的分组选择器来统一设置元素样式
例:
给div标签和p标签字体都设置红色
嵌套
多种选择器可以混合起来使用
给c1标签内部所有p标签设置颜色
伪类选择器
例:(代码)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link {color: red} input:focus{ outline: none; border: 1px solid red; } /*伪元素*/ /*p标签每段内容第一个元素规定颜色*/ p:first-letter {color:red} /*p标签每段内容前面加**/ p:before { content: "*"; color: yellow; } /*p标签每段内容后面加**/ p:after { content: "[*]"; color: blue; } </style> </head> <body> <a href="http://www.abc.com">abc</a> <a href="http://www.luffycity.com">路飞</a> <span id="d1">span</span> <hr> <input type="text"> <hr> <p>qwertyuiopasdfghjklmnbvcxzplkmnkoijnbhuygvcftrdxzsewaq</p> <p>qwertyuiopasdfghjklmnbvcxzplkmnkoijnbhuygvcftrdxzsewaq</p> </body> </html>
效果:
伪元素选择器
before和after 多用于清除浮动
before 在每个<p>元素之前插入内容
first-letter 常用做给首字母设置特殊样式
after 在每个<p>元素之后插入内容
选择器的优先级
在HTML页面中有很多种方式找到一个元素并为其设置样式,浏览器需要有一个优先级来确定应该用哪种样式
其实是按照不同选择器的权重来决定的,权重计算方式:
内联样式的权重为 1000
id选择器的权重为 100
类选择器的权重为 10
元素选择器的权重为 1
-
除此之外还可以通过添加 !import 方式来强制让样式生效,但并不推荐使用,过多使用会使样式文件混乱
CSS属性相关
宽和高
width 属性可以为元素设置宽度
height 属性可以为元素设置高度
块级标签才能设置宽度,内联标签的宽度由内容来决定
字体属性
粗细
fon-weight 用来设置字体的粗细
文字颜色
十六进制 例: #FF0000
一个RGB值 例: RGB(255,0,0)
颜色的名称 例: red
还有rgba(255,0,0,0.3) ,第四个值为alpha,指定了色彩的透明度,范围为0.0到1.0
文字属性
文字对齐
text-align属性规定元素中的文本的水平对其方式
背景属性
背景颜色
background-color: red;
背景图片
background-image: url("1.jpg");
背景位置
background-position: right top;
边框
边框属性
i1 {
border-width: 2px; 宽度
border-style: solid; 实线
border-color: red; 颜色
}
简写:
i1 {
border: 2px solid red;
}
边框样式
border-radius 用这个属性能实线圆角边框的效果
将 border-radius 设置为长或高的一半即可得到圆形
display属性
CSS盒子模型
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;
}
居中:
.margin {
margin: 0 auto;
}
padding内填充
顺序: 上右下左
例:
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
简写:
.padding-test {
padding: 5px 10px 15px 20px;
}
补充: 提供一个,用于四边
提供两个,第一个用于 上下 ,第二个用于 左右
提供三个,第一个用于 上 ,第二个用于 左右 ,第三个用于 下
提供四个就是 上右下
浮动 float
在 CSS 中,任何元素都可以浮动
浮动元素会生成一个块级框
left 向左浮动
right 向右浮动
none 默认值,不浮动
clear clear 属性规定元素的哪一侧不允许其他元素浮动
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
none 默认值,允许浮动元素出现在两侧
inherit 规定应该从父元素继承 clear 属性的值
清除浮动
手写一个清除浮动的类,用的时候把类名加在要清除浮动的块级标签后面就行了
例:
用:
overflow溢出属性
定位(position)
static
static 默认值,无定位,不能当做绝对定位的参照物,并且设置标签对象的left , top等值是不起作用的
relative(相对定位)
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
absolute(绝对定位)
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed(固定)
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
bootstrap网址: https://v3.bootcss.com/
