您的位置：首页 > Web前端 > CSS

css基础学习

2016-07-13 21:11 591 查看

css样式顺序

浏览器缺省设置

外部样式表

内部样式表（位于标签内部）

内联样式（在 HTML 元素内部）

继承

下面的是作用在h2的strong元素上：

<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

h2 strong {
color: blue;
}

id 选择器和派生选择器

id为sidebar里面的p, h2元素格式：

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}

下面是div元素id为inner：

div#inner {text-indent: 10%;}

类选择器

派生选择器

fancy类下面的td元素：

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

元素类选择

td表单里面的fancy类：td.fancy {

color: #f60;

background: #666;

}

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

属性选择器

//所有包含title属性的元素
[title]{
color: red;
}
//所有title为 hehe的元素
[title=hehe]
{
border:5px solid blue;
}

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

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

input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}

表单插入

外部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

内部：

<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航