css初步学习

最新推荐文章于 2024-07-08 14:47:20 发布

f_monday

最新推荐文章于 2024-07-08 14:47:20 发布

阅读量211

点赞数

本文链接：https://blog.csdn.net/f_monday/article/details/53264535

版权

css:层叠样式表
插入样式表的方法有三种:

外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>

内联样式
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

一般有3中选择器：标签名、id、class选择器
id选择器以#开头
class选择器以.开头

background-color 背景颜色
h1 {background-color:green;}

background-image 背景图片
background-image:url('g.png');

background-repeat 不重复显示背景图片
background-repeat:no-repeat;

color 文字颜色
h1 {color:black;}
text-align 文字的位置
h1 {text-align:center;} 文本居中
text-decoration 删除文本格式，主要用于删除超链接下划线
a {text-decoration:none;}
text-transform 更改文本中的大小写字母
h1 {text-transform:uppercase;}    改为大写
h1 {text-transform:lowercase;}    改为小写
h1 {text-transform:capitalize;}   每个单词的首字母大写

text-indent 首行缩进
p {text-indent:50px;} 缩进50个像素
font-style 字体样式
h1 {font-style:normal;} 正常字体
h1 {font-style:italic;} 斜体

font-size 改变字体大小
h1 {font-size:40px;}
em 设置字体大小，与px等同，1em的默认大小是16px
h1 {font-size:2.5em;}

连接样式：
a:link {color:#FF0000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */

冒号代表引用a标签的属性

链接背景色：
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

list-style-type：指定标记类型
ul.a {list-style-type: circle;}        圆点
ul.b {list-style-type: square;}  方框

ol.d {list-style-type: lower-alpha;}    字母

padding: 0px; 内边框
margin: 0px; 外边框

list-style-position: 规定列表中列表项目标记的位置

li {display:inline;} 将li标签中的值一行显示出来
span {display:block;} 将li标签中的值一列显示出来

定位：
h1{position:fixed;top:30px;} 固定位置：将元素位置固定在窗口，不占原来位置，即使窗口滚动也不会移动

h2{position:relative;left:-20px;} 相对正常位置设置位置

h2{position:absolute;left:100px;top:150px;} 绝对位置：将元素位置固定在窗口，不占原来位置

float:right; 浮动，只能向左或向有移动，一个浮动元素会尽量向左或向右移动，
直到它的外边缘碰到包含框或另一个浮动框的边框为止。后面的元素将围绕它，不影响之前的元素。

clear:both; 清除浮动。