CSS学习-CSDN博客

本文链接：https://blog.csdn.net/u013929052/article/details/124940497

1.CSS定义

2.使用实例及引入样式

浏览器默认样式，优先级最低

外部样式link

内部样式

行内样式，内联样式，优先级最高

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
/*这是个注释*/
p
{
	color:red;
	text-align:center;
} 
</style>
</head>

<body>
<p>Hello World!</p>
<p>这个段落采用CSS样式化。</p>
</body>
</html>

.选择方式：

基本选择器

标签:p{}

id:#idname{}

类选择器：.className{}

高级选择器

层次选择器，div a子类选择器，+相邻兄弟选择器，~通用选择器，同级兄弟

结构伪类选择器：

属性选择器

如div[propsname=propsvalue]{}属性值严格相等

如div[propsname*=propsvalue]{}属性值包含

如div[propsname^=propsvalue]{}属性值以propsvalue开头

如div[propsname$=propsvalue]{}属性值以propsvalue结尾

1.id选择：  #idname
2.类选择:   .classname
3.指定特定的HTML元素使用class: p.classname
4.直接写元素： p

美化网页

字体：

color

font-size

排版网页

text-align水平对齐

text-indent缩进

line-hight行高

text-decoration下划线，删除线等

超链接伪类:hover,

列表样式：

list-style

背景样式：

背景颜色

背景图片：repeat,渐变背景

盒子模型：

边框border

内边距padding

外边距margin

盒子模型尺寸计算：border+margin+padding+内容元素

box-size

圆角边框border-radius

box-shadow

浮动

网页布局，标准文档流

display:block ,inline,inline-block

浮动：float:左浮动，右浮动

清除浮动：clear:left,right,both,none

解决父级边框塌陷问题：

设置父元素高度,不推荐，

在父元素中添加一个空div clear:both，不推荐，会增加空的div

overflow:hidden，不适用于需要滚动的情况

伪类：after{content:'',display:block,clear:both}推荐..

定位

先设定定位模式，再设定定位

绝对定位positon:absolute,会脱离文档流，父元素有定位时，不管是relative还是absolute，相对于父元素定位，父元素无定位时相对于浏览器定位

相对定位position:relative,top,right,bottom,left不会脱离文档流，在原来的位置上进行偏移

固定定位：positon:fixed固定在浏览器某个位置不动

z-index:0-999，在定位的基础上设置图层

4.背景：

1.背景颜色：body {background-color:#b0c4de;}
2.背景图像：body {background-image:url('paper.gif');}
3.图像平铺：body{background-image:url('gradient2.png');background-repeat:repeat-x;}
4.设置定位与不平铺：body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
 //background-position:66% 33%;//background-position:50px 100px;
}
5.背景- 简写属性body {background:#ffffff url('img_tree.png') no-repeat right top;}
6.background-attachment :背景图像是否固定或者随着页面的其余部分滚动。
background-attachment:fixed;
croll	背景图片随页面的其余部分滚动。这是默认
fixed	背景图像是固定的
inherit	指定background-attachment的设置应该从父元素继承
local	背景图片随滚动元素滚动

CSS中，颜色值通常以以下方式定义:
十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"

5.层叠样式：一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。