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：推荐不温卜火 一定要看哦
一些插件的使用等
大学之道亦在自身，努力学习，热血青春
如果对编程感兴趣可以加入我们的qq群一起交流：974178910
有问题可以下方留言，看到了会恢回复哦