CSS日常总结 - 爱码网

CSS：层叠样式表，Cascading Style Sheets

CSS语法：

CSS规则由两个主要的部分构成：选择器，以及一条或者多条声明

selector {declaration1;...;declarationN}

选择器通常是需要改变样式的HTML元素，每条声明由一个属性和一个值组成

元素 {属性1：值1；属性2：值2}

例如

CSS日常总结

CSS水平对齐

margin：把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素：

.center {margin-left:auto; margin-right:auto;width:70%;//如果宽度是 100%，则对齐没有效果。background-color:#b0e0e6; }

使用position属性左右对齐：

.right {position:absolute;right:0px; width:300px; background-color:#b0e0e6; }

使用float属性进行左右对齐：

.right {float:right;width:300px; background-color:#b0e0e6; }

导航栏---为何链接区域变大了display:block属性的原因

<style>

{

list-style-type:none;

margin:0;

padding:0;

}

a:link,a:visited

{

display:block;//display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。而display:inline内联样式则是不换行

font-weight:bold;

text-transform:uppercase;

}

</style>

</head><body>

<ul>

</ul>

水平导航栏：将<li>的display改为inline内联即可（不换行）

或者

li {

float:left;

}

选择器的分组：逗号隔开

selector1，selector2，selector3 {declaration1;...;declarationN}

元素的元素：如li列表下的strong元素样式

li strong { font-style: italic; font-weight: normal; }

* { margin: 0; padding: 0; }

id 选择器：定义了id属性的元素，用#id作为选择器，如id为sidebar的元素下的<p>标签

#sidebar p { font-style: italic; }

div#sidebar p { font-style: italic; }

类选择器：以.点开头加类型作为选择器，如

.fancy td { color: #f60; background: #666; }

td.fancy { color: #f60; background: #666; }

.class1.class2.fancy {//至少要同时包含，如果只有class1则不匹配 color: #f60; background: #666; }

属性选择器：[]括起来

input[type] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; }

input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; }

a[href][title] {color:red;}//同时拥有href和title属性的

<p class="important warning">This paragraph is a very important warning.</p>

如果写成 p[class="important"]，那么这个规则不能匹配示例标记。

要根据具体属性值来选择该元素，必须这样写：

p[class="important warning"] {color: red;}

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

p[class~="important"] {color: red;}

如果忽略了波浪号，则说明需要完成完全值匹配。

CSS日常总结

伪类：selector : pseudo-class {property: value}

a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */

</style>

</head>

<body>

<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>

创建css样式表

1.引入外部样式表，<link>导入

2.内部样式表：在head中定义style

3.内联样式表，在元素中定义style

CSS框模型

CSS日常总结