CSS知识总结

时间:2020-8-30 作者:admin


CSS简介

–层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

–CSS是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。

属性 描述
type text/css 规定样式表的MIME类型
media screen
tty
tv
projection
handheld
print
braille
aural
all
为样式表规定不同的媒介类型

CSS书写地方

内联样式权重>内部样式权重>外部样式权重

内联样式

也称行内或行间样式,是在html标签上添加style属性来实现的,
实例如下

<div style="height: 100px;width: 100px; background-color: red;"></div>

CSS知识总结

内部样式

在文档内部使用标签内添加的样式,内部样式的代码可以复用、符合W3C标准,尽量让结构和样式分开处理
实例如下
CSS知识总结
CSS知识总结

外部样式

外部样式通过link标签引入进来

<link rel="stylesheet" media="all"  type="text/css" href="theme.css">

rel:指定资源跟页面的关系
type:指连接文档的类型
href:定义被链接文档的地址。
media: 规定被链接文档将显示在什么设备上。,很重要,这个能让你的代码在不同的设备上显示布局不乱,比如在手机上使用一种样式,在电脑上又使用另一种样式,从而包装布局不会乱
实例

  1. 定义一个Css文件
    CSS知识总结
  2. 然后通过link 标签引入
    type=“text/css” :文档类型为css
    media=“all” : 在所有类型设备上显示
    rel=“stylesheet” : 定义这是要导入的样式表的 URL。
    href=“untitled.css” :要导入的样式表的相对路径地址
  • 在同一级文件夹下的导入只需要写出需要导入文件的名字,在父级文件夹下的就需要添加”…/”,每多一个父级额外添加一个”…/”
    CSS知识总结
    效果图
    CSS知识总结
    外部样式能被任何HTML页面引用,从而使得你写的代码得到最大限度的复用,强烈推荐使用外部样式

颜色表示法 – color

颜色是由红(RED),绿(GREEN),蓝(BLUE )光线的显示结合。

  • 单词表示法
  • 十六进制表示法
  • RGB三原色表示法(范围0-255)
    如下:
    CSS知识总结

CSS背景样式 – background

说明 CSS
background-color 指定要使用的背景颜色 1
background-position 指定背景图像的位置 1
background-size 指定背景图片的大小 3
background-repeat 指定如何重复背景图像 1
background-origin 指定背景图像的定位区域 3
background-clip 指定背景图像的绘画区域 3
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1
background-image 指定要使用的一个或多个背景图像 1

实例 :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.backgroundStyle {
   	background-attachment:	local	; /*设置背景会随着元素内容的滚动而滚动。*/
	background-blend-mode:luminosity;/*属性定义背景层的混合模式(图片与颜色)为亮度模式。 */
	background-clip: padding-box;/*设置背景图片的定位区域为padding*/
	background-color: aqua;/*定义背景颜色为aqua*/
	background-image: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1779243380,322783013&fm=26&gp=0.jpg");/*设置背景图片*/
	background-origin: content-box;/*指定了背景图像的位置区域为Content*/
	background-position:top; /*设置背景图像的起始位置为top*/
	background-repeat: no-repeat; /*设置background-image不会重复*/
	background-size: 100px 100px;
}
	.style1{
		height: 500px;
		width: 500px;
		overflow: auto;
	}
</style>
</head>

<body>
<div class="backgroundStyle style1">
	<h1>feajfasjdfhasdffsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	<h1>fsadfdasf</h1>
	</div>
	
</body>
</html>

实现效果
滚动滚动条,背景也会随着元素内容而移动
CSS知识总结


CSS边框样式 – border

  • border-style:边框样式(solid实线、dashed虚线、dotted点线…)
  • border-width:边框大小(px)
  • border-color:边框颜色
    【注】可单独对一个边框进行设置(border-top/right/bottom/left-)
    实例:
//利用CSS边框实现三角形
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div {
        width: 0px;
        height: 0px;
        border-top-color: transparent;
        border-top-style: solid;
        border-top-width: 30px;
        border-right-color: red;
        border-right-style: solid;
        border-right-width: 30px;
        border-bottom-color: transparent;
        border-bottom-style: solid;
        border-bottom-width: 30px;
        border-left-color: transparent;
        border-left-style: solid;
        border-left-width: 30px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

效果图
CSS知识总结
复合样式:border:1px red solid;(边框大小 颜色 样式)对单个边也可以用


CSS文字样式 – font

  1. font-display:
    font-display是CSS中新添加的属性,它能实现之前类似于Font Loading API和Bram Stein’s Font Face Observer这种第三方脚本实现的功能。
    详细介绍请看font-display的用法

  2. font-family:字体类型
    设置多字体方式(使其能够适应更多的计算机和设备)
    引号的问题(有的字体中间有空格,必须用引号引起来)

  3. font-size:字体大小(默认大小16px),字体大小一般为偶数

属性取值 字体大小
xx-small 最小
x-small 较小
small
medium 正常(默认值)
large
x-large 较大
xx-large 最大
  1. font-weight:字体粗细(单词[normal正常、bold加粗]; 数字[100-500正常、600-900加粗])
  2. font-style:字体样式(normal正常、italic斜体[italic所有带有倾斜字体的可以设置;oblique没有倾斜属性的字体也可以设置倾斜])
  3. color:字体颜色
  4. font-kerning:字体间距

复合样式:font:weight style size family、font:style weight size family、font:weight style size/line-height family
实例如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
      span {
        font-display:swap;
		  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
		  font-kerning: auto;/*字体间距*/
		  font-style:italic;/*字体样式为斜体*/
		  font-variant:small-caps;/*浏览器会显示小型大写字母的字体*/
		  font-weight:lighter;/*定义更细的字符。*/
		  font-size: 50px;
		  color: aqua;
      }
    </style>
  </head>
  <body>
    <span>无所不能的林大王asp</span>
  </body>
</html>

效果如图
CSS知识总结


CSS段落样式

text-decoration:文本修饰(underline下划线、line-through删除线、overline上划线、none不添加任何修饰),可添加多个修饰,用空格隔开
text-transform:文本大小写(针对英文段落,lowercase小写、uppercase大写、capitalize首字母大写)
text-indent:文本缩进(首行缩进font-size的两倍,或2em[em相对单位,永远跟一个字体设置的大小相同)
text-align:文本对齐方式(left默认、right、center、justify[两端点对齐,中间自行调节])
line-height:定义行高(不是固定值,根据当前字体的大小变化,用数字+px或scale[相对于原来字体的比例]表示)
letter-spacing:定义字间距
word-spacing:定义词间距(针对英文)
强制折行

word-break:break-all; 非常强烈的折行
word-wrap:break-word; 不是那么强烈的折行


CSS选择器

  1. ID选择器

css:#elem{}
html:id=“elem”
【注】1.在一个页面中,ID值是唯一的
2.命名规范,字母 _ – 数字 (命名的第一位不能是数字)
3.命名方式:驼峰式(小驼峰、大驼峰)、下划线式、短线式

  1. CLASS选择器

css:elem{}
html:class=“elem”
【注】1.class选择器是可以复用的
2.可以添加多个class样式
3.多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序
4.标签+类的写法

  1. 标签选择器

css:div{}
html:

  1. 群组选择器/分组选择器

css:div,p,span{}
通配选择器
*{}
尽量避免使用通配选择器,因为会给所有的标签添加样式

  1. 层次选择器

后代:M N{}
父子:M > N{}
兄弟:M ~ N{} 当前M下面的所有兄弟N标签
相邻:M + N{} 当前M相邻的N标签

  1. 属性选择器

div[class]{}
div[ class ][id]{}
div[class=box]{}
div[class*=search]{} //只要search在class中出现过都可以选中
=:完全匹配 *=:部分匹配 ^=:起始匹配 $=:结束匹配

  1. 伪类选择器

css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候,用伪类来添加。
:link 访问前的样式(只能给a标签)
:visited 访问后的样式(只能给a标签)
:hover 鼠标移入时的样式(可以给所有标签)
:active 鼠标按下时的样式(可以给所有标签)
如果四个伪类都生效,顺序为:L V H A

  1. 伪元素选择器

div:after{content: ;color: }
div:before{content: }
:checked、:disabled、:focus 都是针对表单元素

  1. 结构性伪类选择器

:nth-of-type(){}、:nth-child(){} 角标从1开始,n值表示从0到无穷大即都被选中,隔行换色(2n)(2n+1)
选中第一项 :first-of-type{} :first-child{}
选中最后一项 :last-of-type{} :last-chile{}
只有一项的时候被选中 only-of-type{}
【注】type和child的区别:type看孩子类别,child不区别孩子类别

CSS样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承(默认不继承,可以使用inherit值让其继承)

CSS优先级

  • 相同样式优先级
    当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况
  • 单一样式优先级
    style行间(权重1000)> id(权重100) > class(权重10)> tag(权重1)> 继承
    !important(不能针对继承的属性进行优先级的提升)
  • 提升样式优先级,非规范方式,不建议使用 #elem{color:red !important;}
    标签+类与单类
    标签+类 > 单类
  • 群组优先级
    群组选择器与单一选择器的优先级相同,靠后写的优先级高
  • 层次优先级
    权重比较、约分比较

CSS盒子模型

CSS知识总结

padding/border/margin

只写一个值:上右下左
写两个值:上下、左右
写三个值:上、左右、下
写四个值:上、右、下、左

  1. 背景颜色会填充到margin以内的区域(不包括margin区域)
  2. 文字会在content区域
  3. padding不会出现负值,margin是可以出现负值的

box-sizing(盒尺寸,可以改变盒子模型的展示形态)[content-box]/[border-box]
使用场景:1.不用再去计算一些值
2. 解决一些百分比的问题input{width:100%;padding:30px;box-sizing:border-box;}
margin叠加
当给两个盒子同时添加上下外边距的时候,就会出现叠加的问题(取两者中大的值作为叠加值),只有上下有,左右没有

解决方案:

  1. BFC规范
  2. 想办法只给一个元素添加间距

margin传递
传递问题只会出现在嵌套的结构中,且只有margin-top会有传递的问题,其它三个方向没有传递问题

解决方案:

  1. BFC规范
  2. 给父容器加边框
  3. margin换成padding(加给父元素,padding-top: ;并进行调整)

margin自适应居中(只可以左右,不可以上下)
margin-left:auto;margin-right:auto;居中
一般写法:margin:0 auto;(margin:auto auto;)


标签分类

布局一般用块标签,修饰文本一般用内联标签

按类型:
block:块 div p ul li h1…
独占一行;支持css中所有的样式;不写宽时,和父元素宽相同;所占区域是一个矩形
inline:内联 span a em strong img…
挨在一起;有些样式不支持(宽、高、margin、padding的某些);不写宽时,宽度由内容决定;所占区域不一定是矩形;内联标签之间会有空隙(换行产生),解决,找到两个内联的父元素:font-size:0;然后两个内联在设置font-size;16px;空隙消失
inline-block:内联块 input select…
挨在一起,支持宽高

显示框类型

display:block/inline/inline-block/none(让指定标签隐藏)
disp:none不占空间的隐藏;visibility:hidden占空间的隐藏

标签嵌套规范

块标签可以嵌套内联标签
块标签不一定能嵌套块标签
内联标签不能嵌套块标签

溢出隐藏

overflow:visible(默认)/ hidden / scroll(有滚动条)/ auto(内容多的时候有滚动,内容少的时候没有)
overflow-x、overflow-y:针对x、y分别设置

透明度与手势

opacity
0(透明)~ 1(不透明)0.5
rgba( , , ,0.5) 最后一个为透明度,只针对背景,不针对文字,可以让指定样式透明,不改变其他样式
cursor 手势
default:默认透明
自定义鼠标样式:pointer(手型)、move(十字米可移动的样式)、help(箭头带问号)
自定义,准备图片 .cur .ico的才可以,`cursor:url(),auto;

最大、最小宽高

min-width、max-width
min-height、max-height
一个容器怎么适应屏幕的高:

html,body{height:100%}
.contrainer(height:100%}
1
2

CSS的默认样式

没有默认样式:div、span、…
有默认样式:
body(margin:8px)、h1(margin:上下16px)-h6、p、ul(margin:上下16px padding:左40px 默认点:list-style:disc)、a(text-decoration:underline)…

CSS重置样式

*{margin:0;padding:0;}
ul{list-style:none;}
a{text-decoration:none;color:#666;}
img{display:block;}

图片和容器底部有一些空隙

vertical-align:baseline;基线对齐 ==> vertical-aglin:bottom;底线对齐
display:block; //推荐

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。