初识HTML(四)---CSS(超详细)
CSS
css
简介
简单来说css就是来控制元素样式的 w3school 手册 为什么要用css呢 样式重复以及代码看着难受等问题 如下图对比
实现此代码 一
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: black;float:right;"></div>
<div style="width: 100px;height: 100px;background-color: red;"></div>
<div style="width: 100px;height: 100px;background-color: green;float: left;"></div>
<div style="width: 100px;height: 100px;background-color: yellow;float: right;"></div>
</body>
</html>二
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.one{
width: 100px;height: 100px;background-color: black;float:right;
}
.two{
width: 100px;height: 100px;background-color: red;
}
.three{
width: 100px;height: 100px;background-color: green;float: left;
}
.four{
width: 100px;height: 100px;background-color: yellow;float: right;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>当然样式代码还可以更简洁 此处对比元素内代码的多少
基础用法
通过在head标签中的style标签可以来控制样式
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1{
color: #FF0000;
}
h2{
color: aqua;
}
</style>
</head>
<body>
<h1>我是狗</h1>
<h2>巧了，我也是狗</h2>
</body>
</html>
高级用法—选择器
id选择器
对id标记的元素调整样式
什么是id
<h1 id="oneH">我是狗</h1>id=“data” data就是id的值 标记此元素id值为data 简单来说就是 某个人你可以不知道它叫什么 但是他的代号是 张三 id=“张三” 但是id是唯一的 一个公司中只能有一个代号张三
id选择器如何使用
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#oneH{
color: #0000FF;
}
</style>
</head>
<body>
<h1 id="oneH">我是狗</h1>
</body>
</html>
在style标签中用#来标记 比如id=“one” 就写成 #one{ … }
类选择器
什么是类 class 元素属性的类名 示例如下
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.oneH{
color: #0000FF;
}
</style>
</head>
<body>
<h1 class="oneH">我是狗</h1>
<h2 class="oneH">我是猪</h2>
</body>
</html>
在style标签中用#来标记 比如class=“one” 就写成 .one{ … } class是公用的 多个元素可以用同一个class
属性选择器
什么是属性 name title id class等待都是元素属性 但是id class都有特定的所以除去这俩用属性选择器 [attribute]选取带有指定属性的元素 [attribute=value]选取带有指定属性和值的元素 [attribute~=value]用于选取属性值用于中包含指定字符串的元素 [attribute|=value]用于选取带有以指定值开头的属性值的元素，该值必须是完整字符串 [attribute^=value]用于属性值以指定值开头的每个元素 [attribute$=value]用于属性值以指定值)结尾的每个元素 [attribute*=value]用于匹配属性值中包含指定值的每个元素 用法如下
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
[name]{
color: red;[attribute]选取带有指定属性(此处为name)的元素
}
[name=two]{
color: #0000FF;[attribute=value]选取带有指定属性(此处为name)和值(此处为two)的元素
}
[name~=twenty]{
color: aqua;[attribute~=value]用于选取属性值(此处为name)用于中包含指定(此处为twenty)字符串的元素
}
[name|=five]{
color: blueviolet;[attribute|=value]用于选取带有以指定值(此处为five)开头的属性值(此处为name)的元素，该值必须是完整字符串 }
[name^=he]{
color: chartreuse;[attribute^=value]用于属性值(此处为name)以指定值(此处为he)开头的每个元素
}
[name$=p]{
color: darkgreen;[attribute$=value]用于属性值(此处为name)以指定值(此处为p)结尾的每个元素
}
[name*=god]{
color: black;[attribute*=value]用于匹配属性值(此处为name)中包含指定值(此处为god)的每个元素
}
</style>
</head>
<body>
<h1 name="one">我是狗</h1>
<h1 name="two">我是狗</h1>
<h1 name="twenty three">我是狗</h1>
<h1 name="twenty four">我是狗</h1>
<h1 name="three">我是狗</h1>
<h1 name="five-one">我是狗</h1>
<h1 name="five one">我是狗</h1>
<h1 name="hello">我是狗</h1>
<h1 name="wow p">我是狗</h1>
<h1 name="oh god cool">我是狗</h1>
</body>
</html>
引用方式
HTML内引入
写在style标签内
<style type="text/css"></style>外部导入
引用css文件(本地/网络) 文件目录
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="./style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1 class="one">我是狗</h1>
</body>
</html>.one{
color: red;
}
同样可以引用别人的网络资源中的css
<link href="地址" type="text/css" rel="stylesheet" />比如一些字体或者特效样式
后续会推出
前端：js入门 vue入门 vue开发小程序 等 后端： java入门 springboot入门等 服务器：mysql入门 服务器简单指令 云服务器运行项目 python：推荐不温卜火 一定要看哦 一些插件的使用等
大学之道亦在自身，努力学习，热血青春
腾讯云开发者
