CSS
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS相关的知识，希望对你有一定的参考价值。
1.<head>标记，就可以将一个外部样式表文件，链接到文档中，语法标记,且都要写在<head>里面：
<link rel="stylesheet"href="链接文档地址.css"
2.并在title下后面加上读写样式：
<style type="text/css">
需要在css里表示的内容
</style>
hover元素
为鼠标移上去所变换的样式：
<html lang="en">
<head>
<link rel="stylesheet" href="../CSS/xinjian.css">
<meta charset="UTF-8">
<title>表头</title>
<style type="text/css">
p:hover{
color: black; 【表示字体为黑色】
font-size: 100px;【表示字大小为100px】
border: 10px solid #bbbbbb;【表示为边框为10px厚度 #后面为边框颜色】
background-color: white; 【表示为边框内部颜色】
}
</style>
</head>
<body>
<p>这是一段字</p>
</body>
</html>
</body>
选择器
3.选择器分为以下几种：
元素选择器 类选择器
ID选择器 包含选择器
相邻兄弟选择器 子元素选择器
伪类选择器 伪元素选择器
(1)元素选择是指HTML里面的常用元素
<head>
<style type="text/css">
h1 {color:blue; 【设置字体颜色为，蓝色】
}
h2 {color:silver; 【设置字体颜色为，银色】
}
</style>
</head>
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<p>段普通的段落</p>
</body>
</html>
(2)类选择器代码中，元素的class都指定为important，且前面加·
<html>
<head>
<style type="text/css">
.important {color:red; 【表示颜色，红色】
}
</style>
</head>
<body>
<h1 class="important">标题1.</h1>
<p class="important">段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</body>
</html>
（3）ID选择器前面有一个#
<html>
<head>
<style type="text/css">
#intro{font-weight:bold; 【表示字体格式，加粗】
}
</style>
</head>
<body>
<p id="intro">段落</p>
<p>段落2</p>
</body>
</html>
(4)包含/后代选择器使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用，若需要就加class，如果在ul里面就会读取所有被em包围的内容，无限层
<html>
<head>
<style type="text/css">
h1 em {color:red; 【em是字体为斜体】
}
</style>
</head>
<body>
<h1>这是<em>标题</em></h1>
<p>这是<em>段落</em></p>
</body>
</html>
—————————————————————————————————————————————————————
<ul>
<li>列表1
<ol>
<li>列表1-1</li>
<li>列表1-2</li>
<li>列表1-3</li>
<ol>
<li>列表1-3-1</li>
<li>列表<em>1-3-2</em></li>
<li>列表1-3-3</li>
</ol>
</li>
<li>列表1-4</li>
</ol>
</li>
<li>列表2</li>
<li>列表3</li>
</ul>
(5)相邻兄弟选择器选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px; 【h1与p之间，距离h1靠顶端50px】
}
</style>
</head>
<body>
<h1>标题1</h1>
<p>段落1</p>
<p>段落2</p>
</body>
</html>
___________________________________________________
<html>
<head>
<style type="text/css">
li + li {font-weight:bold; 【字体属性为，加粗】
}
</style>
</head>
<body>
<div>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
</div>
</body>
</html>
(6)子元素选择器这个规则会把第一个h1下面的两个strong元素变为红色，但是第二个h1中的strong不受影响
<html>
<head>
<style type="text/css">
h1 > strong {color:red; 【注意子结合符(>)两边可以有空】
}
</style>
</head>
<body>
<h1>这是 <strong>标题1</strong> <strong>标题1</strong> </h1>
<h1>这是<em>表<strong>题1</strong></em></h1>
</body>
</html>
(7)伪类选择器和伪元素选择器有点复杂(个人)，大概能了解一下
CSS背景样式
background-color 属性为背景颜色，可以写成：
background-color: gray(表示为颜色值/即属性值);
如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：
background-color: gray; padding: 20px; 【padding表示内边距】
background-image表示为背景插图，可以写成:
body background-image: url(图片地址gif)【body是指整个页面】
背景重复：
background-repeat重复拉伸图片可以写成：
<html>
<head>
<style type="text/css">
body
{
background-image:url(图片地址.gif);
background-repeat: repeat-y 【表示重复方式为Y轴/列】
}
</style>
</head>
<body>
</body>
</html>
背景图片位子：
background-position其中的position表示位子，可以这样写：
body
{
background-image:url("图片地址.gif‘);
background-repeat:no-repeat; 【no-repeated表示不重复】
background-position:center; 【center表示居中】
}
图片位子：
background-image:url(‘图片地址.gif‘);
background-repeat:no-repeat; 【no-repeated表示图片不重复】
background-position:top; 【position表示图片位子top后面为方位值】
背景图片防滚动：
background-attachment 【attachment意为附着】
background-image:url(图片地址.gif);
background-repeat:no-repeat;
background-attachment:fixed 【fixed意为固定】
文本样式
文本缩进：
text-indent 【indent为缩进的意思】
text-indent: 5em 【em为行长单位】
如果不小心超出了文本域或者浏览器显示的范围，就应该设置内或外边距：
text-indent: -5em; padding-left: 5em 【padding为左间缝隙距】
处理文本大小写：
text-transform none【transform为转换大小】分别可加四个值：
none 【无样式】
uppercase 【大写字母】
lowercase 【小写字母】
capitalize 【首字母大写】
文本装饰：
text-decoration none【decoration为装饰】分别可加五个值：
none 【无样式】
underline 【下划线】
overline 【上划线】
line-through 【删除线】
blink 【闪烁线】
列表
text-align 和 vertical-align 属性设置表格中文本的对齐方式：
align表示水平对齐方式，比如左对齐、右对齐或者居中
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐，要结合height进行使用
轮廓
outline 在一个声明中设置所有的轮廓属性
outline-color 设置轮廓的颜色
outline-style 设置轮廓的样式
outline-width 设置轮廓的宽度
CSS框模型
1.框模型分为：
margin【外边距】
padding【内边距】可以加填充
content【文本内容】
border【边框】
其中margin可以设置负值，则padding不能
—————————————————————————————————————————————————————
2.padding中可以在内边距设置四个单独的属性，为顺时针，分别设置上、右、下、左
padding-top 【上】
padding-right 【右】
padding-bottom 【下】
padding-left 【左】
例如：
20px 20px——————————————————值可以设置的不一样
上下 左右
20px 20px 20px
上 左右 下
20px 20px 20px 20px
上 右 下 左
边框多样化
3.若想设置边框的某一边的颜色，可以这样写：
border-top-color:transparent【上边框颜色{透明}】
border-right-color 【右边框颜色】
border-bottom-color 【下边框颜色】
border-left-color 【左边框颜色】
4.若想设置边框的某一边的宽度，可以这样写：
border-top-width 【上边框的宽度】
border-right-width 【右边框宽度】
border-bottom-width 【下边框宽度】
border-left-width 【左边框宽度】
外边距
5.可以设置外边距，距离页面的距离，单位为px：
margin-top 【距上距离】
margin-right 【距右距离】
margin-bottom 【距下距离】
margin-left 【距左距离】
定位
6.定位分为四种:
statec【静态定位，表示没有定位】
relative【相对定位，表示元素框偏移某个距离】
absolute【绝对定位】
fixed【固定定位】
——————————————————————————————————————————————————————
7.浮动float只能接两个值：
left
right
以上是关于CSS的主要内容，如果未能解决你的问题，请参考以下文章
css [css：fadeout / fadein] css示例。 #css
css 深度提示#css中的css base builder CSS