赞
踩
css是层叠样式表,主要作用是设置HTML页面中的文本内容格式(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等等外观显示样式。
html
标签的属性位置,写在开始标签上css
样式以分号分割eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- html和css结合的第一种方式:直接在html标签上,新增一个style属性,在style属性里面去添加属性--> <!--内联样式--> <div style="width: 600px; height: 200px; background-color: silver; font-size: 30px; border-radius: 30px"> hello </div> </body> </html>
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*内部样式:把样式写在head内部,再加一个标签<style> 在里面去写样式*/ div { width: 600px; height: 300px; background-color: silver; font-size: 40px; } </style> </head> <body> <div> hello world </div> </body> </html>
外部样式
把css
样式写在一个单独的css
文件中, 引入到html
文件中。
引入方式:
<link rel="stylesheet" type="text/css" href="./01_css.css" />
<style type="text/css">
@import url(./01_css.css);
</style>
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <style>--> <!-- @import "Demo2.css";--> <!-- </style>--> <!-- 可以直接写一个link,然后href写相对路径--> <link rel="stylesheet" type="text/css" href="./Demo2.css" /> </head> <body> <div> hello world </div> </body> </html>
会作用于所有指定的标签
标签名{css样式}
div{}、p{}
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 100px; /*background-color改变的是背景颜色*/ background-color: aqua; font-size: 50px; /*color改变的是字体的颜色*/ color: coral; /*框框的圆角半径*/ border-radius: 30px; } p{ font-size: 100px; color: brown; } </style> </head> <body> <div> hello world </div> <p> !!!!!!!!! </p> </body> </html>
<div class="div1">
.类名{css样式}
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 200px; height: 200px; background-color: blue; font-size: 30px; } .div2{ width: 100px; height: 100px; background-color: brown; font-size: 20px; } </style> </head> <body> <div class="div1"> hello world </div> <div class="div2"> Yes! I can </div> </body> </html>
<div id="div1">
#id{css样式}
#div1{}
、#div2{}
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div-id { width: 200px; height: 200px; background-color: yellow; font-size: 40px; } </style> </head> <body> <div id="div-id"> 这个div—id </div> </body> </html>
元素1 元素2 {样式声明}
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div p{ font-size: 30px; color: crimson; } </style> </head> <body> <div> 这是div <p> 这是第一个p </p> <p> 这是第二个p </p> </div> </body> </html>
元素1> 元素2{}
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div >p{ font-size: 30px; color: blue; } </style> </head> <body> <div> <p> hello world </p> </div> <div> !!!! </div> <p> ???? </p> </body> </html>
后代选择器与子类选择器的区别:
div p{}
div > p{}
使用方式:元素1, 元素2
eg:
<style>
div,p{
font-size: 30px;
color: crimson;
}
</style>
用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
选择标签的hover状态
a:hover{}
当a标签hover时候,样式
选择第一个元素,选择第n个元素
p:first-child{} p:nth-child(2){}
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:hover{ background-color: brown; } div{ width: 200px; height: 200px; color: blue; font-size: 20px; background-color: silver; } div:hover{ font-size: 30px; } </style> </head> <body> <div> 这是div </div> </body> </html>
伪元素是用来添加一些选择器的特殊效果
eg:
想往h1标签前面插入元素
h1:before{
content: url("1.jpg")
}
选择标签中带有某个属性的
使用方式:[target] {}
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 属性选择器*/ [href] { font-size: 30px; background-color: crimson; } </style> </head> <body> <a href="https://baidu.com">这是百度</a> </body> </html>
important
提高它的优先级盒子模型:是指一个HTML元素,在经过浏览器解析之后,最终会变成一个矩形的盒子
盒子模型分四部分:
border
:指代边框的属性eg:
border: 1px solid
border: 1px solid red
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ /*设置的宽和高,其实是内容区域的大小*/ width: 200px; height: 100px; background-color: brown; border: 1px solid; border: 10px solid yellow; /*1px 控制的是边框的粗细; solid控制的是线性*/ } </style> </head> <body> <div> this is div!! </div> </body> </html>
内边距(padding)/ 外边距(margin)的设置:
padding : 30px
padding : 20px 10px
padding : 30px 20px 10px
padding : 30px 20px 10px 5px
就是两个框框,他们的外边距在垂直方向上 “紧相邻”,它们的外边距会合并。
eg:
<style> .div1 { width: 300px; height: 200px; background-color: #e38c21; margin-bottom: 50px; } .div2 { width: 300px; height: 200px; background-color: #2175e3; margin-top: 50px; } </style> <div class="div1"> div1 </div> <div class="div2"> div2 </div>
eg:
<style> .div-father { width: 300px; height: 500px; background-color: #e38c21; margin-top: 50px; } .div-son { width: 300px; height: 200px; background-color: #2175e3; margin-top: 50px; } </style> <div class="div-father"> <div class="div-son"> </div> </div>
display
属性,属性值为block
display:block
div
、p
、h1
、 h2
、 h3
、 h4
、 h5
、 h6
,ol
、ul
、li
、form
、table
display
属性,属性值为inline
display:inline
块级元素和行级元素的区别:
display:inline-block;
可以通过display
属性,来完成 行级元素、块级元素、行内块之间的转换
形象的讲, 我们可以使一个html的盒子模型,脱离标准文档流, "漂浮"起来
特点:
clear: 谁受影响谁清除
left:在左侧不允许浮动元素。
right:在右侧不允许浮动元素。
both:在左右侧不允许浮动元素。
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1 { width: 200px; height: 200px; background-color: yellow; float: left; } .div2 { width: 300px; height: 400px; background-color: red; float: left; } /*浮动是顶对齐*/ .div3{ width: 500px; height: 600px; background-color: blue; float: left; } .div4{ width: 400px; height: 500px; background-color: green; /*谁受影响,谁清除浮动*/ clear: both; } </style> </head> <body> <div class="div1"> </div> <div class="div2"> </div> <div class="div3"> </div> <div class="div4"> </div> </body> </html>
注:
rgb(xx, xx, xx)
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。