CSS

最新推荐文章于 2024-10-04 08:35:10 发布

hu_bo_tao

最新推荐文章于 2024-10-04 08:35:10 发布

阅读量148

点赞数

分类专栏：前端文章标签： CSS

本文链接：https://blog.youkuaiyun.com/hu_bo_tao/article/details/83316533

版权

前端专栏收录该内容

2 篇文章

订阅专栏

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:（图片是偷来的，嘘）
在这里插入图片描述

id 和 class 选择器   井号ID 点Class
------------------------
#para1
{
    text-align:center;
    color:red;
}
------------------------
.center {text-align:center;}
------------------------
tips:ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
两个同样的class名称，可以通过制定特定html元素使用css
<style>
p.center
{
	text-align:center;
	color:green;
}
</style>
<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>

CSS代码写在哪里？
1、外部样式表。即写在html页面外边，写在xxx.css文件，然后在html头部链接。
		<head>
		<link rel="stylesheet" type="text/css" href="mystyle.css">
		</head>
	然后在mystyle.css文件里面：
		hr {color:sienna;}
		p {margin-left:20px;}
		body {background-image:url("/images/back40.gif");}
	tips：不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px" 。
2、内部样式表。写在html页面里，使用style标签在head元素里面添加样式
		<head>
		<style>
		hr {color:sienna;}
		p {margin-left:20px;}
		body {background-image:url("images/back40.gif");}
		</style>
		</head>
3、内联样式。即将css代码直接写在标签里面。慎用!
		<p style="color:sienna;margin-left:20px">这是一个段落。</p>
4、万一内联样式+外部样式用时对一个标签进行渲染，那么会听谁的？有一个优先级区分。
内联样式Inline style > （内部样式Internal style sheet >外部样式External style sheet > 浏览器默认样式
5、还有如果很多种选择器同时对一个标签进行渲染，那么听谁的？
这里有一个选择器优先级。

CSS样式优先级
在这里插入图片描述

CSS背景：
background-color
background-image
background-repeat:repeat-x;  x轴平铺 水平平铺 
background-repeat:no-repeat; 不平铺
background-position:right top; 背景图片位置
background-attachment:fixed; 背景图片是固定的。（配合不平铺使用。）

详细：
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
简写：
body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时，属性值的顺序为：:
background-color
background-image
background-repeat
background-attachment
background-position

文本颜色 十六进制值、一个RGB值、颜色的名称
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

文本的对齐方式
h1 {text-align:center;}  居中 
p.date {text-align:right;} 对右
p.main {text-align:justify;} 当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

文本修饰
h1 {text-decoration:overline;}        文字顶部带横线
h2 {text-decoration:line-through;} 文字中部带横线
h3 {text-decoration:underline;}     文字底部带横线

文本转换：
p.uppercase {text-transform:uppercase;}    THIS IS SOME TEXT.
p.lowercase {text-transform:lowercase;}      this is some text.
p.capitalize {text-transform:capitalize;}        This Is Some Text.

字体系列:
font-family:"Times New Roman";规定元素的字体:
p.serif{font-family:"Times New Roman",Georgia,Serif}
p.sansserif{font-family:Arial,Verdana,Sans-serif}
font-size:40px; 字体像素
font-size:2.5em; 用em来设置字体大小（为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。）
font-size:100%;

CSS 链接
CSS有四个链接状态
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

CSS 列表
无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）  ul
有序列表 - 列表项的标记有数字或字母  ol
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
 
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

作为列表项标记的图像
ul
{
    list-style-image: url('sqpurple.gif');
}

CSS 表格
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>

CSS盒子模型：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
在这里插入图片描述

CSS 边框
border-style:solid; 实线虚线  dotted solid double dashed; 点状 实线 双线 虚线 上 右 下 左 顺序
border-color:red;颜色
	border-top-style:dotted;  上
	border-right-style:solid; 右
	border-bottom-style:dotted; 下
	border-left-style:solid;左

CSS 轮廓（outline）

CSS margin(外边距)