css:层叠样式表
一、css的作用
1、以统一的方式实现样式的定义
2、提高页面样式的可重用性和可维护性
3、实现了内容(HTML)和表(css)的分离
HTML和css之间有什么关系
HTML:构建网页的结构
css:构建HTML元素的样式
二、css的使用
1.内联样式:将样式声明在元素的style属性中
<p style="color:red;">1</p>
color:样式声明 表示一个具体的显示效果,可以多个同时存在的,多个样式之间用分号隔开
每个样式声明都有两部分组成: color:样式属性
red:属性值
2.内部样式表
(1)在head里面加一个 style标签
(2)在style中添加任意多的样式
<head>
<title></title>
<style type="text/css">
div{
color: red;
font-family: 楷体;
background-color: green;
width: 500px;
height: 500px;
}
</style>
</head>
3.外部样式表
(1)创建一个单独的样式表文件保存样式规则
在css文件夹下新建一个css文件 并在里面添加好样式
(2)在需要使用的页面上添加link标签进行引入
4.引入方式的优先级
就近原则 谁离这个标签近,最后就是谁的样式
三、css样式表的特征
1、继承性:子级标签可以直接使用夫级元素声明好的样式(大部分css都能被继承)
2、层叠性:可以同时写多个样式
3、优先级
低:浏览器的缺省值
中:就近原则
高:内联样式
4、!improtant规则
作用:强制调整优先级(一定最后显示)
打破了优先级规则
四、css基础选择器
作用: 规范了页面中哪些元素能够使用定义好的样式
目的: 匹配页面元素(找到页面的元素)
1.通用选择器
作用:匹配页面中的所有元素
用法:*{}
2.标签选择器
作用:匹配当前所有这一类的标签
用法 p{}
3.类选择器
作用:由css定义好,可以被任意标记的class属性值进行引用的选择器
语法:
1.在标签内 加上class属性
2.在样式表中 .类名{} 进行引入
注意: 类名或者ID名 不能以数字开头
除了 _ -以外不能有其他的特殊字符
4.ID选择器
作用:针对指定ID值的元素去定义样式
语法: 1.在标签内加上ID属性
2.在样式表中 使用 #ID名{} 进行引入
优先级: id > class > p(标签)> *
权值;
标签选择器: 0,0,0,1
类选择器 0,0,1,0
id选择器 0,1,0,0
内联样式 1,0,0,0
选择器的权值加到一起,大的优先;如果权值相同,后定义的优先
五、复杂选择器
1.群组选择器
作用:选择器声明式以 , 分割 的选择器列表
2.后代选择器
后代: 只要是具备层级关系的元素
使用空格 隔开
3.子代选择器
子代:只具备一级层级的关系的元素
使用 > 隔开
<style type="text/css">
/*子代选择器*/
#div1>div>p{
font-family: 楷体;
font-size: 100px;
color: green;
}
/*父代选择器*/
#div1 .son1 p{
font-family: "微软雅黑";
font-size: 50px;
color: red;
}
/*群组选择器*/
#div,p,.son{
color: #008000;
font-size: 60px;
}
</style>
六、尺寸属性
1、作用:用户设置元素的宽度和高度 单位为px 百分比
2.宽度属性和高度属性
width height 设置元素的宽高
max-width max-height 最大的宽度 和 最大的高度
min-width min-height 最小的宽度 和 最小的高度
3.允许被修改高度和宽度的元素
1.块级元素允许被设置宽高
2.行内块大部分允许被设置宽高的 例如 表单控件 单选和复选 是不能修改尺寸
3.存在width和height属性的元素 可以设置宽高的样式 img table
4.溢出
使用尺寸属性限制元素大小的时候,如果内容所需要的空间太小大于元素本身,会导致溢出效果
属性:
overflow
visible:默认的效果 溢出可见
<style type="text/css">
.div1{
width: 300px;
height: 300px;
background-color: pink;
overflow: visible;
}
</style>
<link rel="stylesheet" type="text/css" href="css/demo01-css.css"/>
</head>
<body>
<div class="div1">
1、夜里,你要抬头仰望满天的星星,我那颗实在太小了,我都没发指给你看它在哪儿。这样倒也好,我的星星,对你来说就是满天星星中的一颗。所以,你会爱这满天的星星,所有的星星都会是你的朋友。
2、我总以为自己很富有,拥有一朵世上独一无二的花;实际上,我所拥有的不过是一朵普通的玫瑰而已。一朵普通的玫瑰花……
3、人们早已忘记了这个道理。可是你不应将它遗忘。你必须永远对自己所驯服的东西负责。你要对你的玫瑰花负责。
4、小王子:我在想星星们闪闪发亮是不是为了要让每个人找到回家的路。他说:看,我的那颗星星,恰好就在头上却距离如此遥远!
5、驯养的意思:这是常常被人遗忘的事情。狐狸说道,它的意思就是建立关系。
6、如果是我,要是我有五十三分钟可以自由运用,那我会悠哉游哉向一道清泉走去。
</div>
hidden: 隐藏 溢出的时候隐藏
<style type="text/css">
.div1{
width: 300px;
height: 300px;
background-color: pink;
overflow: hidden;
}
</style>
<link rel="stylesheet" type="text/css" href="css/demo01-css.css"/>
</head>
<body>
<div class="div1">
1、夜里,你要抬头仰望满天的星星,我那颗实在太小了,我都没发指给你看它在哪儿。这样倒也好,我的星星,对你来说就是满天星星中的一颗。所以,你会爱这满天的星星,所有的星星都会是你的朋友。
2、我总以为自己很富有,拥有一朵世上独一无二的花;实际上,我所拥有的不过是一朵普通的玫瑰而已。一朵普通的玫瑰花……
3、人们早已忘记了这个道理。可是你不应将它遗忘。你必须永远对自己所驯服的东西负责。你要对你的玫瑰花负责。
4、小王子:我在想星星们闪闪发亮是不是为了要让每个人找到回家的路。他说:看,我的那颗星星,恰好就在头上却距离如此遥远!
5、驯养的意思:这是常常被人遗忘的事情。狐狸说道,它的意思就是建立关系。
6、如果是我,要是我有五十三分钟可以自由运用,那我会悠哉游哉向一道清泉走去。
</div>
scroll 滚动 当元素溢出的时候会出现滚动条 溢出时滚动条可用
<style type="text/css">
.div1{
width: 300px;
height: 300px;
background-color: pink;
overflow: scroll;
}
</style>
<link rel="stylesheet" type="text/css" href="css/demo01-css.css"/>
</head>
<body>
<div class="div1">
1、夜里,你要抬头仰望满天的星星,我那颗实在太小了,我都没发指给你看它在哪儿。这样倒也好,我的星星,对你来说就是满天星星中的一颗。所以,你会爱这满天的星星,所有的星星都会是你的朋友。
2、我总以为自己很富有,拥有一朵世上独一无二的花;实际上,我所拥有的不过是一朵普通的玫瑰而已。一朵普通的玫瑰花……
3、人们早已忘记了这个道理。可是你不应将它遗忘。你必须永远对自己所驯服的东西负责。你要对你的玫瑰花负责。
4、小王子:我在想星星们闪闪发亮是不是为了要让每个人找到回家的路。他说:看,我的那颗星星,恰好就在头上却距离如此遥远!
5、驯养的意思:这是常常被人遗忘的事情。狐狸说道,它的意思就是建立关系。
6、如果是我,要是我有五十三分钟可以自由运用,那我会悠哉游哉向一道清泉走去。
</div>
auto 自动 内容溢出的时候会出现但是没有溢出的时候不出现
七、边框阴影
属性: box-shadow
h-shadow :水平位置
v-shadow :垂直位置
blur :模糊距离
spread :阴影尺寸
color :颜色
inset :将外阴影变成内阴影
<style type="text/css">
.div1{
width: 300px;
height: 300px;
background-color:pink ;
box-shadow: 2px 3px 5px 2px hotpink;
}
</style>
<link rel="stylesheet" type="text/css" href="css/demo01-css.css"/>
</head>
<body>
<div class="div1">
</div>
</body>
总结:这是我根据自己学的做的只是部分小结,可能有所不足,仅供参考啊。有需要我补充的在评论区留言啊!