CSS样式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/u010692259/article/details/79808554

CSS

1.选择器
#para1{text-align:center;color:red;}
.center {text-align:center;}

样式优先级:
外部样式<内部样式<内联样式

优先级顺序
下列是一份优先级逐级增加的选择器列表：
通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式
!important 规则例外
当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里.
尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

2.属性
#背景
body
{
background-color:#6495ed;

background-position:right top;
margin-right:200px;

background-image:url('img_tree.png');
background-repeat:no-repeat;
}
简写
body {background:#ffffff url('img_tree.png') no-repeat right top;}
当使用简写属性时，属性值的顺序为:
background-color
background-image
background-repeat
background-attachment
background-position

#文本
p
{
color:#00ff00;

//文本对齐方式
text-align:(center,right,left,justify)

//向文本添加修饰(一般用于删除下划线)
text-decoration:none;

//文本首行缩进
{text-indent:5px;}

//文本方向 rtl(right to left)
div.ex1 {direction:rtl;}

//字符间距和字间距
letter-spacing:5px;
word-spacing:5px;

//行高
p.big {line-height:200%;}
}

#字体
//字体系列
p{font-family:"Times New Roman", Times, serif;}
//字体大小
h1 {font-size:40px;}
h1 {font-size:2.5em;}
//字体粗细
{font-weight:[normal,lighter,bold,900];}

#链接
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */

a:active {color:#0000FF;} /* 鼠标点击时 */

#盒子模型
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

border
border-style:solid;
border-top-style:dotted;
border-bottom-style:dotted;

border-color:red;
border-top-style:red;
border-bottom-style:red;

边框（border）：
border:5px solid red;

轮廓(outline)
在border元素外边，margin内部，border的一层轮廓。
outline:#00FF00 dotted thick;[outline-color,outline-style,outline-width]

外边距（Margin）
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性
margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;

margin属性可以有一到四个值。
margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px

margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px

margin:25px 50px;
上下边距为25px
左右边距为50px

margin:25px;
所有的4个边距都是25px

内边距，填充
padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px
padding属性可以有一到四个值，同margin。

#尺寸
height:100px;
line-height
max-height
min-height
width:100px;

#显示
//占用空间
h1.hidden {visibility:hidden;}
//不占用空间
h1.hidden {display:none;}

块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
applet ,button ,del ,iframe , ins ,map ,object , script

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了

#定位positioning
/正常流，相对于正常位置，相对于浏览器固定位置，相对于最近的父元素
position:【static，relative，fixed，absolute】;
越小显示在后边
z-index:-1;

浮动【img】
float:[left,right,none,inherit]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-3.3.1.js"></script
</head>
<body >
<style>
ul
{
list-style-type:none;
padding:0;
margin:0;
width:25%;
position:fixed;
background-color:#f1f1f1;
//overflow:auto;
height:100%;
}

li a
{
display:block;
text-decoration: none;
height:50;
padding:8px 16px;
//border:1px solid red;
}

.liclass
{
background-color:green;
color:white;
}

a:hover
{
color:white;
background-color:#555;
}
</style>

<ul id="ulid" class="ulclass" >
<li><a class="liclass" href="#a">主页</a></li>
<li><a href="#a">新闻</a></li>
<li><a href="#a">联系</a></li>
<li><a href="#a">关于</a></li>
</ul>

<div style="margin-left:25%;">
<h2>Fixed Full-height Side Nav</h2>
<p>
Notice that this div element has a left margin of 25%.
Some text..
</p>
<p>
Some text..
</p>
<div>

</body>
</html>