首页 > 代码库 > 前端基础学习css
前端基础学习css
一、伪类
anchor用于控制链接效果
a:link (没有访问过的链接)，定义链接的常规状态
a:hover(鼠标放在链接上的状态)，用于控制显示效果 （常用）
a:visited(访问过的链接) ，能清楚判断访问过的链接
a:active(在鼠标按下时的状态)
例子：
Title.{
: : : }
.{
: : : }
.:.{
: }
:{
::}
nihaotopbottom:before p:before 在p元素之前插入内容
:after p:after 在p元素之后插入内容
二、继承
<body style="color:red"><p>hello</p></body>
p元素的内容会继承body的css
css的优先级:
内联权值style ........1000
id选择器权值... 100
.class选择器权值....10
<>标签选择器权值...1
文本对齐方式属性
text-align
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果
font-size: 10px;
line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效
text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线
font-family: ‘Lucida Bright‘
font-weight: lighter/bold/border/
font-style: oblique
text-indent: 150px; 首行缩进150px
letter-spacing: 10px; 字母间距
word-spacing: 20px; 单词间距
text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写
背景属性:
background-color
background-image
background-repeat
background-position
边框属性:
border-width
border-style (required)
border-color
单独设置边框:
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
列表属性:
list-style-type 设置列表项标志的类型。list-style-image 将图象设置为列表项标志。list-style-position 设置列表中列表项标志的位置。list-style 简写属性。用于把所有用于列表的属性设置于一个声明中display属性:
display:none 隐藏标签
display:block 将标签设置成块级标签
display:inline 块级标签设置成内联标签
display:inline-block 可做列表布局，即有内联标签的属性，又有内联标签属性
外边距(margine)和内边距(padding):
margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像
单个外边距设置
margin-top: 100px;
margin-bottom:100px;
margin-left:100px;
margin-right:100px;
margin: 0 auto; 居中
分页例子:
Title.{
: : %}
.{
: : }
{
: }
.{
: : : : }
.{
:}
..{
: :: : : : : : : : %}
..{
: : }
..{
: : :}
.:{
: : }
12345678910下一页float属性:
文档流结构
block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效
常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列
例子:
Title{
: }
.{
: : : : }
.{
: : }
.{
: : : : }position定位
relative: 相对定位
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
absolute: 绝对定位
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义
fixed：固定在浏览器某个部位，不随滚动条滚动
本文出自 “linux技术” 博客，请务必保留此出处http://haoyonghui.blog.51cto.com/4278020/1950360
前端基础学习css