CSS基础

最新推荐文章于 2024-10-01 23:54:35 发布

原创最新推荐文章于 2024-10-01 23:54:35 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

学习专栏收录该内容

45 篇文章

订阅专栏

一、什么是CSS
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
二、CSS语法
如:
p{color:red fron-size:12px;}
CSS声明总是以分号(;)结束，声明组以大括号({})括起来:
三、CSS选择器
Css选择器有三种，分别是id选择器，class选择器，标签选择器
1.id选择器
配套< div>使用
一般来说div会给出id属性并为其赋值。
id用#来声明

<style>
#one{color：red;}
</style>
<div id = "one">这是个句子</div>

此句话就会显示成红色

2.class选择器
配套< div>使用
使用.class选择器一般div里面就会给class赋值
类似id选择器

<style>
.fy{color:red;}
</style>
<div class  ="fy">这是条语句</div>

这样就会设置该div语句为红色

3.标签选择器
配套标签使用。
如

<style>
mam{color:red;}
</style>
<mam>这是条语句</mam>

此时他就找到标签mam然后修改它的格式
四、标签样式表
插入样式表的方法有三种:
1.外部样式表(External style sheet)
2.内部样式表(Internal style sheet)
3.内联样式(Inline style)

1.外部样式表(External style sheet)

<head> 
//rel固定写法  href链接
<link rel="stylesheet"  href="mystyle.css"> 
</head>

五、CSS背景
CSS背景是用来控制HTML元素的背景
CSS属性定义背景效果有下面几种
1.background-color:背景颜色
2.background-image:背景图片
3.background-position:规定背景图像的起始位置

background-size 规定背景图像的尺寸
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
参数
1.scroll随着滚动
2.fixed不随着滚动
background-repeat:设置重复方向
参数
1.repeat-x在x方向上重复
2.repeat-y在y方向上重复
2.no-repeat:不重复

六、CSS文本格式
color：定义文字的颜色
text-align定义文本排列属性
text-decoration主要用来删除连接的下划线
a{text-decoration:none;}
text-indent表示文本第一行相距左边的距离
font-style:表示字体
参数
1.正常 normal
2.斜体 italic
font-size:字体大小

七、CSS链接
链接的四种状态：
a:link 正常，未访问过的链接
a:visited 用户已访问过的链接
a:hover 用户鼠标放在连接上时
a:active 链接被点击的那一刻

顺序规则：
1.a:link a:visited
2.a:hover
3.a:active

八、CSS列表样式
列表分两种
无序列表和有序列表
< ul> 和 < ol>

list - style -type:指定列表项标记的类型：
circle空心圆
square：方块实心样式
upper-roman:小写罗马数字
等等–

九、表格样式
border：表格边框属性
也要指出TH,TD的边框

表格的填充
如果在表的内容控制空格之间的边框，使用td,th元素的填充属性
td,th{
padding:15px;
}
十、CSS盒子模型
Margin:边距
border：边框
padding：填充
content：实际内容

十一、CSS分组和嵌套选择器
h1,div,p{color:green;}
表示平级关系，h1,div,p内的文字颜色都是绿色
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。

十二、CSS DISPLAY
display:none;隐藏
display:block;显示

十三、CSS 定位（Position）
position属性：
必须给出以下属性之一
static
元素默认值，没有定位，出现在正常流中，不会受top，bottom，left，right影响
relative
相对定位，就是普通定位
通常作为绝对定位的容器块
fixed
元素的位置相对于浏览器窗口是固定位置，不会随窗口的滚动而滚动
特点：
不占空间
会和其他元素重叠
absolute
绝对定位，一般用于相对于父类的定位如：

.one{
			position: relative;
			top: 100px;
			left: 100px;
			width: 100px;
			height: 100px;
			border: 1px solid red;
		}
		.two{
			position: absolute;
			top: 20px;
			left: 20px;
			width: 100px;
			height: 100px;
			border: 1px solid black;
		}
		<div class="one">
			<p class="two"></p>
		</div>

不然就是相对于HTML定位，也就是相对定位了

十四、浮动
float:
一般用于排列中< ol> < ul>
会使元素向左或者向右移动，往往用于图像

小结
CSS小结
1.语法：
div{各种属性} 1.标签选择器
#id{各种属性} 2.id选择器（id值唯一）
.class{各种属性} 3.class选择器

2.插入样式表的三种方法
1.外部样式表 head里面使用标签
2.内部样式表标签
3.内联样式表标签内使用style属性
优先级3>2>1

text-align：center所有元素居中
text-decoration:none去除a标签的下划线

设置链接样式
a:link{}未访问链接
a:visited{}已访问链接
a:hover{}鼠标移动到链接上时
a:active{}鼠标点击时

list-sytle-type:修改列表样式

盒子模式：
Margin
Border
Padding
Content

display：none隐藏
display：block显示

Position：
static 默认
relative 相对于默认定位的定位
fixed 固定定位
absolute 相对于父类的定位

浮动float
float：left
一般用于图片或者列表中