CSS层叠样式表

最新推荐文章于 2024-01-09 20:49:39 发布

原创最新推荐文章于 2024-01-09 20:49:39 发布 · 529 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS[Cascading Style Sheet]

定义：
主要功能是定义网页的外观（如字体颜色等）显示样式，他可以和JavaScript等浏览器等脚本语言相互结合使用。CSS是用来美化页面的可以控制网页的外观表现。
分类：
1.页内直接设置CSS：在当前页面直接指定样式就像化妆品一样直接与皮肤接触
2.第三方页面设置：在别的网页单独设置CSS,然后通过文件调用这个CSS来实现指定的显示效果，就像围巾和包包一样，起了一个搭配的作用。
优点：
1.实现了内容与表现分离，使网页的内容与表现完全分开
2.使网页的表现非常统一，并且容易修改
3.可以支持多种设备，例如手机，PDA，打印机，电视机，游戏机等
4.可以减少网页的代码量，增加网页的浏览速度，减少硬盘的占用空间
CSS元素：

块元素：
房子的结构大件块元素一般从新行开始，并且大都可以容纳内联元素和其他块级元素
排列方式：
默认排列方式是换行排列

div p h1-h6 table ul ol dl form pre//块级元素

内联元素：大件里面的小件卫生间中的浴池
排列方式：
默认排列方式是顺序同行排列宽度超出包含他的容器本身的宽度时才自动换行

a span input img label select strong br//

可变元素：修饰处理

CSS 的引用方式

行内样式

<any style="样式名:样式值"></any>

页面内样式

<head>
	<style>
		标签名{
			样式名：样式值;
		}
	</style>
</head>

外部样式

<head>
	<link rel="stylesheet" type="text/css" href="链接样式表文件.css"/>
</head>

优先级
行内>页面内>外部样式表

CSS设置和修饰

文本设置

color:red;//字体颜色：红色；
text-align:center;//文本居中 left/center/right/justify 左/中/右/两端对齐
font-weight:bold;//字体加粗
font-style:italic;//字体倾斜
text-decoration:underline/none;// 下划线/去掉下划线
text-indent:2em;//首行缩进两个字符
vertical-align:bottom;//文本的垂直对齐方式   bottom/middle/top
line-height:30px;//页面文本的行高  
//一般用行高布局垂直对齐方式
//行高=高度，内容在垂直正中间
//行高>高度，内容偏下
//行高<高度，内容偏上

text-transform:uppercase/lowercase/capitalize;//文本转换  大写/小写/首字母大写

font-size:19px;//字体大小：19px;
font-family:宋体；
font:19px 宋体；//字体大小 字体

背景设置

background:背景颜色 背景图片 背景是否重复 背景定位位置；
//背景图片 url(图片路径)
//是否重复 repeat/no-repeat/repeat-x/repeat-y 重复/不重复/水平重复/垂直
//背景定位位置  left/center/right 水平左/中/右  top/center/bottom 垂直上/中/下
background-size:精确像素/百分比/em/rem;
backgroung-attachment:scroll;背景图片固定定位 scroll滚动 fixed固定

边框设置

border:solid 1 px #000;//边框线：实线 线粗细 颜色；
border-style:属性；
//线型：solid 实线 double 双线 dotted 点状线 dashed 虚线 none 无边框线 
//groove 定义3D沟槽边界 效果取决于边界的颜色值
//ridge 定义3D脊边界 效果取决于边界的颜色值
//inset 定义一个3D的嵌入边框 效果取决于边界的颜色值
//outset 定义一个3D的突出边框 效果取决于边界的颜色值

必须在改变其颜色之前获得边框

列表设置
对ul和li的显示样式进行修饰

list-style-type:disc/circle/square;  实心圆/空心圆/实心方块
list-style-images:none/url;
list-style-position:outline/inside; 符号在文本外显示/文本内显示
list-style:list-style-type/list-style-position/list-style-image;

选择器

类选择器的定义方式
命名：.name:{}
调用：<any class="name"></any>
标签选择器的定义方式
命名：标签名{} //p{}
调用：<标签></标签>
ID选择器的定义方式
命名：#name{}
调用：<any id="name"></any>
伪类选择器的定义方式
正确使用修饰链接4个伪类的顺序为：
link:没有被访问的超链接
visited：页面超链接被访问后的显示效果
hover：鼠标放在链接上时的效果
active：鼠标点击时的状态
后代选择器的定义方式
格式：父元素/祖先元素子元素
eg：div a/.nav a
父子选择器的定义方式
父元素>子元素
eg: .box>a

网页中的图片格式
jpg gif png webp
网页中常用的图片格式有GIF和JPEG两种，能够在任何浏览器中正常显示。

盒子模型
一个网页其实就是一个大容器，在网页上展示的信息就像在容器中装东西一样。CSS中的所有文档元素都会生成一个由边界，边框等元素组成的矩形框，这个矩形框就是盒模型。

盒模型的内容所遵循的原则如下所示：

当盒模型内的内容大于容器空间时，内容的显示顺序是从左到右
当内容超过定义的容器宽度时，将自动换行显示。
padding:（上右下左）
auto对padding属性不起作用
指边框内边缘和内容外边缘之间的区域
不可以接受负值
margin:（上右下左）
设置页面元素的边界大小
水平auto:
在元素模型的水平方向上，非浮动块元素盒模型的各部分宽的和等于父元素的宽度。auto的值就是填充父元素宽度的默认值（子元素无边框条件下）
垂直auto:
通常被设置为0，表示没有边界

布局

浮动流
标准流
浮动流+标准流=混合流

通配符*

*{
	margin:0;
	padding:0;
}
display:block;//显示
disolay:none;//隐藏   不占位置

visibility:hidden;//隐藏  占位置
visibility:visible;//显示