Css-1
Posted yangzhaon
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Css-1相关的知识，希望对你有一定的参考价值。
注释：
- 单行注释:
/*需要注释的内容*/
- 多行注释：
/*
需要注释的多行内容
*/
使用css样式的三种方式：
????1、head内style标签内部直接写css代码
????2、link标签引入外部css文件
????3、直接在标签内部通过style属性书写css样式
?
如何查找标签
????基本选择器：
- 标签选择器
- id选择器
- 类选择器
4、通用选择器
????组合选择器如：div和span
- 后代选择器
Div span
Div下的sapn
- 儿子选择器
Div > span
????????所有父类是div的span
- 毗邻选择器
Div+span
????紧接着div后面的span元素
- 弟弟选择器
Div~span
Div后面所有的span标签
?
属性选择器：
????1、[xxx]
????????只要有xxx属性名的标签都找到
????2、[xxx="1"]
????????只要标签有属性名为xxx并且值为1
????3、p[xxx="2"]
????????P标签内必须有属性名为xxx并且值为2的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
[xxx] {
color:red;}
[xxx=‘1‘] {
color: blue;}
p[xxx=‘2‘] {
color:green;}
</style>
</head>
<body>
<span xxx="2">span</span>
<p xxx>我只有属性名,应该是红色</p>
<p xxx="1">我有属性名和属性值并且值为1，应该是蓝色</p>
<p xxx="2">我有属性名和属性值并且值为2，应该是绿色</p>
</body>
</html>
输出结果：
????分组与嵌套：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分组与嵌套</title>
<style>
div {color: red;}
p {color: red;}
span {color: red;}
/*分组*/
div，p，span {color: blue;}
/*嵌套:不同的选择器可以共用一个样式*/
/*后代选择器与标签组合使用*/
div p，span {color:red;}
</style>
</head>
<body>
<div>这是div标签,蓝色</div>
<p>这是p标签，蓝色</p>
<span>这是span标签，蓝色</span>
</body>
</html>
结果：
可以判断当标签选择器、分组、后代选择器和标签选择器组合使用时——标签选择器优先级最高
????伪装选择器
- 未访问的连接
a:link
- 已访问的连接
a:visited
- 鼠标移动到连接
a:hover
- 选定的连接
a:acitve
- Input输入框获取焦点时样式
Input:focus {
????????outline:none;
????????background-color:#eee
}
?
????针对首字母设置特殊样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style>
p:first-letter{font-size: 48px;color: red;}
</style>
</head>
<body>
<p>测试字体大小和颜色</p>
</body>
</html>
????在每个<p>元素之前插入内容before
<style>
p:before{content: "*";color: red;}
</style>
????在每个<p>元素之后插入内容after
<style>
p:after{content: "*";color: red;}
</style>
?
????????元素的权重：
- 内联样式权重为1000
- Id选择器的权重为100
- 类选择器的权重为10
- 元素选择器的权重为1
?
设置宽和高：
????宽度：width
????高度：height
关于字体设置：
- 字体类型font-family
- 字体大小font-size
- 字体粗细（可以字体粗细大小值）
- normal默认值
- bold粗体
- bolder更粗
- loghter更细
- inerit继承父类字体粗细值
?
文本对齐：
- 左对齐：left
- 右对齐：right
- 居中对齐：center
- 两端对齐：justify
对文字装饰：
????通过text-decoration属性来实现特殊效果
????????None????????默认，标准的文本不加任何特殊效果
????????Underline????文本下一条直线
????????Overline????????文本上一条直线
????????Linherit????????继承父类text-decoration属性
?
????????首行缩进：
????????????Text-index: 像素值
????????设置背景颜色
- 定义一个空的标签
- 针对这个空标签设置属性
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置背景颜色</title>
<style>
div {
width: 400px;
height: 200px;
background-color: green;
/*background: no-repeat url("http://pic37.nipic.com/20140110/17563091_221827492154_2.jpg");*/}
</style>
</head>
<body>
<div></div>
</body>
</html>
参数介绍：
????????repeat:背景图片平铺满整个页面
????????repeat-x：背景图片在横向方向平铺
????????repeat-y：背景图片在垂直方向平铺
????????no-repeat：不平铺
????
?
????设置边框：
????????border-width????边框像素
????????border-style????边框样式(none:默认无边框，dotten:点状虚线边框，dashed:举行虚线边框，solid:实线边框)
????????border-color????边框颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
border: 3px solid black;
border-radius: 50%;}
</style>
</head>
<body>
<div></div>
</body>
</html>
?
????
以上是关于Css-1的主要内容，如果未能解决你的问题，请参考以下文章