首页 > 代码库 > css_随笔
css_随笔
1 css 基础语法:
2 派生选择器
li strong {
font-style: italic;
font-weight: normal;
}
<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p> <ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li> <li>我是正常的字体。</li> </ol>
3 css id 选择器
3.1选择器用#来定义
#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p> <p id="green">这个段落是绿色。</p>
3.2 id派生选择器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
html中虽然有id=sidebar的选项,但只有其中为<p>标签被样式了
3.3 基于类的单独选择器
div#sidebar {
border: 1px dotted #000;
padding: 10px;
}
4 css类选择器
4.1用一个. 来表示
.center {text-align: center}
<h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
4.2 也可以用作派生
.fancy td {
color: #f60;
background: #666;
}
4.3 还可以用作基于类的选择
td.fancy {
color: #f60;
background: #666;
}
5 css属性选择器
5.1属性选择器
[title]
{
color:red;
}
5.2 属性和值的选择器
[title=W3School]
{
border:5px solid blue;
}
5.3 属性和多值的选择器
[title~=hello] { color:red; }
包含hello字符串的所有title标签都会被样式
6 css的创建
6.1外部样式表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
用到<link>标签
然后在mystyle.css中定义样式
hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}
6.2 内部样式表
<head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head>
使用到<style>标签
css_随笔
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。