CSS笔记1_CSS引入方式,样式选择器
2017-10-08 本文已影响11人
相关函数
css引入方式主要有四种,按照优先级排列依次为:内联>内部>导入>link
CSS引入方式
内联
直接在标签内部书写style属性
内部
在head标签内书写style标签,在style标签中指定样式
导入
使用@import url("1.css") 导入外部css文本. @import... 需要在style标签内书写
link
使用link标签,link标签不能在style标签中书写.href属性指定路径,rel指定为样式表固定为stylesheet,type表示为css文本固定为text/css
示例代码
<!DOCTYPE HTML>
<html>
<head>
<title>JOE</title>
<style type="text/css">
/*p{color: green}
@import url("1.css")*/
</style>
<link href="2.css" rel="stylesheet" type="text/css">
</head>
<body>
<p /*style="color: red; font-size: 25"*/>中华人民共和国</p>
</body>
</html>
样式选择器
.one b{} 表示内嵌样式
使用class=""来引用样式
下面代码展示了一些样式的文本属性.
示例代码
<!DOCTYPE HTML>
<html>
<head>
<title>JOE</title>
<style type="text/css">
.one{font-size: 18px; font-family: Arial, sans-serif; font-style: oblique}
.one b{font-weight: normal; font-size: 0.5em}
.two{font-size: 20px; line-height: 100px; color: red; letter-spacing: 10px; word-spacing: 50px; text-indent: 30px; text-transform: capitalize; text-decoration: overline; text-align: center;}
</style>
</head>
<body>
<p class="one">我的<b>名字</b>是jack,今年30岁</p>
<p class="two">My name is rose, eightenn years old</p>
</body>
</html>
