Html学习笔记8：初识CSS

标准格式：
选择符{
属性名：属性值;
属性名：属性值;
……
}
css颜色
1.颜色的英文单词
2.十六进制 #00 ff 00 红，绿，蓝两两是一位，可以简写成三位
3.rgb 颜色
格式1：rgb(0,0,255) 三位都放数值，取值范围是0-255，红，绿，蓝
格式2：rgb(0%,100%,0%) 三位都放百分数，取值范围为0%-100%,红，绿，蓝

html 中引入css的方式
1.内联式使用也就是将css代码通过属性名称=属性值的方式放到标签里面去使用
格式：style=“属性名：属性值；属性名：属性值；。。。。”
2.内嵌入式的使用通过html标签去划去一个范围来写css属性
格式：

<style>
    中间写css内容
</style>

注意：1.一个页面中可以写有多个style标记出来的范围
2.style可以放在页面中的任意位置，但是推荐放在head头部使用

引入外部文件

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

1.rel=”stylesheet” 告诉浏览器要引入样式表
2.type=”text/css” 文件类型
3.href=”” 文件URL
css中的选择器
html标签选择器，就是使用html标签当做选择器

1.class选择器
（1）在标签上面添加 class=“class名称”
（2）css中使用 .class名称{}去找

2.id选择器
（1）在标签上面添加属性 id=”id名称”
（2）css中使用 #id名称{} 方式去找

3 * 通配符选择器
格式： *{} 会选取所有html标签

注意
使用不同选择器有级别

id>class>标签选择>通配符选择器

<!DOCTYPE html>  
<html lang="zh-cn">  
<head>  
    <title>全局属性和其它</title>  
    <!-- <meta charset="utf-8"> -->  
    <meta name="author" content="lzh"><!-- 作者 -->  
    <meta name="keywords" content="html5,lzh"><!-- 关键字 -->  
    <meta http-equiv="content-type" content="text/html charset=utf-8">  
    <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"><!-- 3秒钟自动刷新到百度页面 -->
    <style type="text/css">  
    #abc{  
        color: red;  
    }  
    .abc{  
        color: blue;  
    }  
    </style>  
</head>  

<body>  
<div>  
<music>  
我 你  
<b style="font-size: 100px;">&copy;</b>  
<br>  
<p id="abc">这是id</p>  
<p class="abc">这是class</p>  
<p class="abc">这是class</p>  
<p class="abc">这是class</p>  
<input type="text" name="user" accesskey="n">按下alt+n获取光标  
<p contenteditable="true">修改这里的文本</p>  
<p dir="rtl">文字到右边了</p>  
<p hidden>隐藏这里的文字</p>  
<p lang="en" title="这是HTML5提示" style="color: orange;">HTML5</p>  
<input type="text" name="user1" tabindex="2">  
<input type="text" name="user2" tabindex="1">  
<input type="text" name="user3" tabindex="3">  
</body>  
</html>

这里写图片描述

Html学习笔记8：初识CSS

猜你喜欢