css引入样式的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href=" 外部css样式文件">
<style>
/*
内部样式表
其中定义相同规则的选择器下，样式遵循就近原则
*/
p{
/* background-color: 是设置背景的*/
background-color: blueviolet;
size: 10px;
}
p{
background-color:black;
size: 10px;
}
</style>
</head>
<body>
<!-- css
层叠样式表 设置和布置网页，设置字体，颜色吗，大小，间距
浮动布局
定位布局（绝对定位 相对定位 固定定位）
flex 弹性盒子布局
-->
<!-- 引入样式的三种方法 -->
<!-- 1.通过元素上的style定义样式 内联样式 -->
<p style="color: blue;">
这是一个P标签
</p>
<!-- 2引入外部css文件中的样式 配合css文件样式 同过link引用css文件-->
<div class="box">
引入文件的样式
</div>
<!-- 3.使用head中定义好的style中的样式 -->
</body>
</html>
css选择器总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/*类选择器 用定义的类名来选择*/
/* !important是将选择器的权重设置为最高，可以完全覆盖原有定义的样式*/
.Class_h1{
color: bisque !important;
}
/* 标签选择器 利用使用的标签来选择样式 */
h1{
color: yellow;
}
/* 取id 利用id来选择样式 */
#Id_h2{
color: red ;
}
/* 不同的选择器，权重是不一样的 */
/* 1.如果我的样式是申明在style这个标签里面，里面的任何选择器的，都具备1000的权重
2.所有的id选择器，默认权重为100
3.含有类选择，属性选择器，伪类选择，权重是10
4.选择器中包含伪类选择器，则为1分
*/
/* 定义body样式 ， body中的除具有选择器外，文本会默认使用body中的样式 */
body{
color: blue;
/* 颜色是可以被继承的 */
}
span{
color: red;
}
/* 后代选择器 */
.li1{
color: inherit;
/* 当前修改样式这个元素会必定继承父元素的样式 */
}
.li2{
color: initial;
/* 设置为和浏览器保持一致的样式 */
}
.li3{
color: unset;
/* 设置的自然继承，如果能够继承样式就继承，如果不能够就保持就保持原有的样子 */
}
</style>
</head>
<body>
<ul>
<li class="li1">这是list1<a href="">这里有一个a链接</a></li>
<li class="li2">这是list2<a href="">这里有一个a链接</a></li>
<li class="li3">这是list3<a href="">这里有一个a链接</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 全局选择器 */
*{
margin: 0;
padding: 0;
}
/* container：容器*/
.container{
background-color: goldenrod;
}
/*类型/元素/标签选择器*/
p{
color: aqua;
background-color: hotpink;
}
/* 类选择器 */
.box1{
color: blueviolet;
background-color: greenyellow;
}
/* id选择器 */
#box2{
color: lightcoral;
background-color: indigo;
}
/* 标签属性选择器 */
a[title]{
color: lightseagreen;
background-color: lightskyblue;
}
a[href="http://fanyi.youdao.com/?keyfrom=fanyi-new.logo"]{
/* 值完全等于 */
size: 20px;
background-color: mediumvioletred;
}
a[href^='#']{
/* 属性以什么开头 */
size: 25px;
}
a[href$='#']{
/* 属性以什么结尾 */
size: 35px;
}
a[href*='#']{
/* 包含了属性值 */
size: 45px;
}
.btn {
width: 120px;
height: 40px;
line-height: 38px;
text-align: center;
background-color: #18d39b;
color: #fff;
border: 1px solid #0cb683;
border-radius: 8px;
cursor: pointer;
}
/* 冒号后面追加固定关键词 伪类选择器 */
.btn:hover {
/* :hover 鼠标放上去的效果 */
background-color: blue;
color: #666;
}
.box1 p:first-child {
/* 修改了第一个元素的样式 */
font-weight: bold;
background-color: yellow;
}
.box1 p:last-child {
/* 修改了最后一个元素的样式 */
font-weight: bold;
background-color: navy;
}
.box1 p:nth-child(2n-1) {
/* :nth-child 修改指定位置的元素 或指定倍数的元素*/
color: #18d39b;
}
/* 伪元素 双冒号后面加上固定的关键词 */
.p1::first-line {
/* 修改了第一行的样式 */
color: red;
}
.p1::first-letter {
/* 修改了第一个字的样式 */
color: burlywood;
font-size: 32px;
}
.p1::after {
content: '';
/* 在元素之后放下什么 */
}
.p1::before {
content: '';
/* 在元素之前放下什么 */
}
.div1 .son1 {
/* 后代选择:用于选择指定标签元素的第一代子元素。 */
border: 1px solid red;
}
.div1>.son1 {
/* 子代选择器:对一个标签内部所有后代标签进行过滤 */
border: 1px solid #18d39b;
}
</style>
</head>
<body class="container">
<p>这是p标签，使用元素标签p</p>
<span>这是span标签</span>
<br>
<a title="a标签title">这是a标签，使用标签属性选择器a[title]</a>
<br>
<a href="http://fanyi.youdao.com/?keyfrom=fanyi-new.logo">使用标签属性选择器a[href="http://fanyi.youdao.com/?keyfrom=fanyi-new.logo"]</a>
<br>
<button class="btn">按钮</bon>
<br>
<button class="btn">实现伪类选择器</bon>
<div id="box2">
<p>这是div中的p标签，</p>
<span>第一个div盒子,使用id选择器#box2</span>
</div>
<div class="box1">
<p>第二个div盒子,使用类选择器box1</p>
<p>第二个div盒子,使用类选择器box1</p>
<p>第二个div盒子,使用类选择器box1</p>
</div>
<p class="p1">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk水水水水水水水水水水水水水水水水水水水</p>
<br>
<div class="div1">
<div class="son1">
这是一个文本son1
<div class="son1">
这是一个文本son1-son1
</div>
</div>
<div class="son1">
这是一个文本son1
</div>
</div>
</body>
</h>
css盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>盒模型</title>
<style>
/* 将盒模型的外边距和内边距设置为0 ；
替代盒模型（自定义盒子大小）：box-sizing: border-box;
会自动从元素的宽高中减去内边距和边框的宽度
*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置盒子宽高 */
.boxl{
height: 500px;
width: 500px;
background-color: cadetblue;
}
/* 设置盒子四条边的外边距 */
.box{
background-color: crimson;
width: 300px;
height: 300px;
margin-right: 20px;
margin-left: 20px;
margin-top: 30px;
margin-bottom: 30px;
/* margin: 10px;所有边都遵循这个设置
margin: 10px 20px;第一个表示上下边，第二个表示左右边
margin: 10px 20px 30px;第一个边表示上边，第二个表示左右边，第三个表示下边
margin: 10px 20px 10px 5px;顺时针方向上右下左 */
padding: 20px 15px 10px 5px;
/* padding与margin方法使用相同 */
border-width:5px;/*边框粗细*/
border-style:dotted;/*边框样式*/
border-color: darkgoldenrod;/*边框颜色*/
border-top: rgb(0, 255, 0) dashed 10px;
border-left: rgb(133, 30, 81) solid 10px;
/* dotted soild double dashed;=>虚线 实线 双虚线 ; */
}
</style>
</head>
<body>
<div class="boxl">这是boxl样式
<!-- content:表示显示内容，大小和通过wight和height
padding:包裹在内容区域外部的空白空间，设置内边距
margin：最外面的区域，是盒子与其他元素之间的空白区域，设置外边距
border：是盒子的厚度,大小用border设置
-->
<!-- 内联标签，块标签 -->
<!--
块级标签
盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
每个盒子都会换行
width 和 height 属性可以发挥作用
内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
内联元素：大小，边框不能设置
盒子不会产生换行。
width 和 height 属性将不起作用。
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。
-->
</div>
<div class="box">这是box样式</div>
</body>
<ml>
354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
