Skip to main content

基础

说明​

层叠样式biao修饰HTML，负责网页的表面（页面元素的外观，位置等页面样式，如：颜色，大小等

嵌入CSS样式的方法​

行内样式​

写在标签的style属性中(不推荐)

<h1 style="xxx: xxx; xxx: xxx;">
    中国新闻网
</h1>

内嵌样式​

写在style标签中(可以卸载页面任何位置，但通常约定写在head标签中)

<style type="text/css">
    选择器 {
        样式名: 样式值;
        样式名: 样式值;
    }
    
    CSS中常见的选择器：
    	元素选择器
    	id选择器
    	class选择器
</style>

CSS选择器(id>类>元素)​

①元素选择器--所有同元素名的值
元素名称 {
    color: red;
}
h1 {
    color: red;
}
<h1> hello css </h1>
②id选择器--id为唯一值
#id属性值 {
	color: red;
}
#hid {
	color: red;
}
<h1 id="hid">css id</h1>
③类选择器--class为一类值
.class属性值 {
	color: red;
}
.cls {
	color: red;
}
<h1 class="cls">css class</h1>

外联样式​

写在一个单独的.css文件中(需要通过link标签在网页中引入)

h1 {
	xxx: xxx;
	xxx: xxx;
	
	若样式名相同，可如下：
	xxx: xxx xxx xxx;
}

<link rel="stylesheet" type="text/css" href="css/news.css">

隐藏样式​

#id值 {
	display: none;  // 隐藏
    display: block;  // xian'shi
}

字体​

字体大小​

font-size: 12px;

文本装饰样式​

text-decoration: underline;  // 下划线

文本样式​

标准
text-decoration: none;
首行缩进-xx像素
text-indent: 50px;
对齐方式
text-align: center/left/right;
设置行高
line-height: 40px;

指定要定义的背景范围​

box-sizing: border-box;  指定宽度和高度为border(边框区域)的

背景颜色​

background-color: aquamarine;

内边距​

padding: 20px 20px 20px 20px; 上 右 下 左
或简写为: 20px;
注：如果只需要设置一个方位的边框、内边距、外边距，可以在属性名后加上 -位置，如：padding-top\
padding-left、padding-right……

外边距​

margin: 30px 30px 30px 30px 上 右 下 左
或: 0 auto; 浏览器自动计算外边距

边框​

border: 10px solid red; 宽度 线条类型 颜色

浮动样式​

float: left/……
位于文本的位置

设置鼠标的悬停效果​

<style type="text/css">
    标签名：hover {
		color: ……;
        ……
    }
</style>

光标样式​

变成小手
cursor: p

颜色的表现形式​

表示方式表示含义取值
关键字预定义的颜色名red、green、blue……
rgb表示法红绿蓝三原色，每项取值范围：0-255rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
十六进制表示法#开头，将数字转换成十六进制#000000、#ff0000#cccccc,简写：#000、#ccc
color: red;
color: rgb(255, 0, 0)
color: #f00;