什么是css:CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表,他就会按照这个样式l来进行渲染。其实就是让HTML标签变得更好看
语法格式:
选择器 {
属性名1:属性值;
属性名2:属性值;
属性名3:属性值;
属性名4:属性值;
属性名5:属性值;
}
行内样式:
hello world
内部样式:
Title
外部链接:
在我们学习css之前我们要先学会如何找标签,以及找到标签后的操作。
基本选择器:ID选择器,类选择器,元素选择器,通用选择器
组合选择器:后代选择器
两种方式:
Title
呜呜呜
使用id和class
Title
我们使用亲戚关系来表示标签之间的关系
我们使用亲戚关系表示标签之间的关系
p是div的兄弟
哈哈哈哈
属性选择器:通过标签的属性来寻找标签,每个标签都有属性。
属性值有两种
1. id值和class都是标签自带的属性值
2.自定义属性值
password='123'>
针对于usernmae=kk,password=123,属性就是自定义属性
分组选择器使用逗号隔开,所有的选择器都是并列的
组合(嵌套)选择器使用的是空格隔开,选择器不是并列的,最终生效的还是最后一个选择器
Title
div
ppp
sas
关键字:link,hover,active,visited input
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
使鼠标放上去变色:
在选择器a :hover{}加上hover即可
Title
点击访问百度
在选择器a :{}加上active,长按显示颜色
a:active{
color: coral;
}
在选择器a :visitted{}加上,使访问过的链接变色
a:visited{
color: silver;
}
输入时,使底框有焦点(变色)
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
p:first-letter {
font-size: 48px;
color: red;
}
/*在每个元素之前插入内容*/
p:before {
content: "你好啊";
color: red;
}
/*在每个
元素之后插入内容*/
p:after {
content: "[?]";
color: blue;
}
开头第一个字母修改字体大小和颜色
Title
仰天大笑出门去,我辈岂是蓬蒿人
在句子开头前加上符号
.p1:before {
content: "!!!";添加的内容
color: red;颜色
}
after在末尾加上?
.p1:after{
content: "?";添加的内容
color: blue;颜色
}
比较选择器的优先级高低
1. 选择器相同的情况下:
离谁越近,就听谁的,就近原则.
2. 选择器不同的情况下:
行内选择器 >>> id选择器 >>> 类选择器 >>> 标签选择器
宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度,内联标签的宽度由内容来决定。
默认情况下,只有块儿级元素才能设置长、宽,内联元素不能设置,设置了也不错,就是没有效果而已
font-weight用来设置字体的字重(粗细)。
值 描述
normal 默认值,标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细,400等同于normal,而700等同于bold
inherit 继承父元素字体的粗细值
Title
孤帆远影碧空尽,唯见长江天际流
文本颜色
文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定:
● 十六进制值 - 如: #FF0000
● 一个RGB值 - 如: RGB(255,0,0)
● 颜色的名称 - 如: red
还有rgba(255,0,0,0.3),第四个值为alpha, 指定了色彩的透明度/不透明度,它的范围为0.0到1.0之间。
文本对齐
text-align 属性规定元素中的文本的水平对齐方式。
left 左边对齐 默认值
right 右对齐
center 居中对齐
右对齐
文本装饰
text-decoration
none 默认。定义标准的文本。
underline 定义下划线条线。
overline 定上划线线。
line-through 定义穿过文本下的一条线。
背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x:背景图片只在水平方向上平铺
repeat-y:背景图片只在垂直方向上平铺
no-repeat:背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
简写background:#336699 url('1.png') no-repeat left top;
p{
width:3000px;
height:2800px;
border: 1px solid red;
background-image:url("miku.jpg");
background-position:center,120px;
}
边框属性
边框属性
● border-width
● border-style
● border-color
#1 {
border: 2px solid red;
}border-radius
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
display:"block" 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。
display:"inline" 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。
以快递盒为例
1. 快递盒和快递盒之间的举例称为是外边距,用margin值表示
2. 快递盒和里面物品之间的举例称为是内边距,用padding来表示
3. 盒子的厚度我们称为是边框,用border来表示
4. 物品的实际大小称为是content