CSS 引入方式，选择器
2016-12-12 本文已影响34人
LYF闲闲闲闲
CSS引入方式(三种)
- 1.内联属性
对于想要设置样式的HTML元素，直接修改他的style属性，将css代码直接写在style属性里
<div style="font-size:30px">
apple
</div>
- 2.写在style标签里
<style>
#head{
font-size:20px;
}
</style>
- 3.写在link标签里引用外部文件
<link rel="stylesheet" href="styles.css" /> //styles.css是自己写在外部的文件
CSS选择器
- 元素选择器：用HTML中的标签作为选择器，将所有相同的标记应用同一种样式
下面代码中的div中所包含的两个单词的字体颜色都被改变
<style>
div{
font-size:50px;
color: #00B7FF;
}
</style>
<body>
<div><h1>apple</h1></div>
<div>orange</div>
</body>
- 全局选择器：使用 * 选择所有的标记，表示适用于所有的
加星号与不加的效果一样
*.app{
font-size:50px;
color: #00B7FF;
}
*#app{
font-size:50px;
color: #00B7FF;
}
- class选择器：使用.class属性名{样式...}
下面的举例同一样可以修改apple这个单词的颜色和字体
<style>
.app{
font-size:50px;
color: #00B7FF;
}
</style>
<body>
<div class="app">apple</div>
</body>
- 类选择器可以与其他选择器搭配使用，css我们需要修改
div.app{
font-size:50px;
color: #00B7FF;
}
- ID选择器：使用 #id属性名{样式...}
下面的举例同一样可以修改apple这个单词的颜色和字体
<style>
#app{
font-size:50px;
color: #00B7FF;
}
</style>
<body>
<div id="app">apple</div>
</body>
