视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
总结CSS的常用样式
2020-11-27 18:50:19 责编:小采
文档

css 说的通俗一点就是 给标签加样式的。什么玩意是样式呢。你们可以理解为人穿的衣服,化妆之类的修饰,让自己的写的标签变的好看一点

那么这个css 怎么加到对应的标签上面去呢

有3种方法 分别是 外部样式、内页样式、行内样式。

那么这个css 怎么加到对应的标签上面去呢 
有3种方法 分别是 外部样式、内页样式、行内样式。

外部样式:将网页链接到外部样式表。
比如这个样子:
<link rel="stylesheet" type="text/css" href="xiaochuan.css">
内页样式:在网页上创建嵌入的样式表
比如这个样子:
<style>
body{
	
}
</style>
行内样式:应用内嵌样式到各个网页元素。
比如这个样子:
<p style='color:#999999'>xiaochuan</p>

那比如说我这三个 样式都针对 某一个标签
他的优先级是什么样子的呢?
行内样式 > 内页样式 > 外部样式
怎么理解呢
比如:
行内样式 设置文字大小为 14px
内页样式 设置文字大小为 15px
外部样式 设置文字大小为 16px

那么这边标签的 设置文字大小为 14px

css 语法
标签选择符方式 这是针对页面上面对应的所有标签都会生效
p{
	color:#999999
}

<p >xiaochuan1</p>
<h1 >xiaochuan2</h1>
类选择符 这是针对页面上面标签中class属性存在对应类名都会生效
.xiao{
	color:#999999
}

<p class='xiao'>xiaochuan1</p>
<p >xiaochuan2</p> 
ID选择符 这是针对页面上面标签中id属性存在对应类名都会生效 切记这个只能用一次。有可能说某些浏览器可以无限使用但是不建议使用多次
#xiao{
	color:#999999
}

<p id='xiao'>xiaochuan1</p>
<p >xiaochuan2</p> 

关联选择符 这是针对页面上面对应格式的所有标签都会生效
p span{
	color:#999999
}

<p><span>xiaochuan1</span></p>
<p><a>xiaochuan2</a></p>
组合方式 这是针对页面上面对应的所有标签都会生效
h1, h2{ 
	color: red; 
}
<h1>xiaochuan1</h1>
<h2>xiaochuan2</h2>
<h3>xiaochuan3</h3>


如果我们这边需要对某个标签定义多个css怎么去写呢
格式为 样式的名称:样式的值; 
如果写单个的话分号可以进行省略,最后一个分号也可以省略
<p style='color:#999999'>xiaochuan</p>
<p style='color:#999999;color:font-size:9pt'>xiaochuan</p>

css 属性赋值
css 有的属性是有多个值的 当然也可以多个赋值 也可以直接赋值给一个
我这边就说一下margin 吧
margin:10px;
	这个代表的意思为
	所有 4 个外边距都是 10px

margin:10px 5px;
这个代表的意思为
	上外边距和下外边距是 10px
	右外边距和左外边距是 5px

margin:10px 5px 15px;
这个代表的意思为
	上外边距是 10px
	右外边距和左外边距是 5px
	下外边距是 15px

margin:10px 5px 15px 20px;
这个代表的意思为
	上外边距是 10px
	右外边距是 5px
	下外边距是 15px
	左外边距是 20px
当然如果搞不懂直接 
margin-left
margin-top
margin-right
margin-bottom
这样也可以


我这边整理了一下 经常会在项目中用到的一些样式
color 设置文字颜色
font-family 定义文字字体
font-size 设置文字的大小
font-style 设置 文字斜体
line-height 设置行高
text-align 文字的对齐方式
list-style-type 列表样式 
background 定义背景 可以设置 颜色图片之类的
cursor 设置鼠标的形状 
border 设置标签的边框
margin 设置标签的外边距
padding 设置标签的内边距
position 定位
overflow 溢出
float 浮动
width 设置宽
height 设置高

a 标签这个比较特别 
a 所有超链接
a:link 超链接文字格式
a:visited 浏览过的链接文字格式
a:active 按下链接的格式
a:hover 鼠标转到链接

下载本文
显示全文
专题