首页 > 代码库 > css_随笔

css_随笔

2024-08-28 11:39:49   223人阅读

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_随笔


联系
我们