广州建网站藤虎,网站建设手机端官网,饮食类网站,做网站设计的平台div classc1 idd1/div
CSS基本知识
什么是css#xff1a;CSS#xff08;Cascading Style Sheet#xff0c;层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表#xff0c;他就会按照这个样式l来进行渲染。其实就是让HT…div classc1 idd1/div
CSS基本知识
什么是cssCSSCascading Style Sheet层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表他就会按照这个样式l来进行渲染。其实就是让HTML标签变得更好看
语法格式 选择器 { 属性名1:属性值; 属性名2:属性值; 属性名3:属性值; 属性名4:属性值; 属性名5:属性值; }
引入方式
行内样式
body
p stylecolor:redhello world/p
/body
内部样式
headmeta charsetUTF-8titleTitle/titlestylep{background: #2b99ff;}/style/head
外部链接 link href外部.css relstylesheet typetext/css/ CSS选择器
css选择器的基本知识
在我们学习css之前我们要先学会如何找标签以及找到标签后的操作。
基本选择器ID选择器类选择器元素选择器通用选择器
组合选择器后代选择器
两种方式
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
stylep a{color: red;}
/style
/headbody
pa href点点点/aa href点点点/a
/p
a href呜呜呜/a
/body
/html
使用id和class
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
style#div1 .c1 a {color: red;}
/style
/headbody
div iddiv1p classc1a href点点点/aa href点点点/a/pa href呜呜呜/a/div/body
/html 我们使用亲戚关系来表示标签之间的关系 我们使用亲戚关系表示标签之间的关系div iddiv1 div是p的父亲p是div 的儿子p classc1 p是a的父亲a是p的儿子a是div的孙子a href点我把/aa href点我把/aa href点我把/a/pdiva href我会不会变颜色呢/a a是p的兄弟/divp p是div的兄弟a href哈哈哈哈/a/p属性选择器 属性选择器通过标签的属性来寻找标签每个标签都有属性。
属性值有两种 1. id值和class都是标签自带的属性值 div classc1 idd1/div 2.自定义属性值 div classc1 idd1 usernmae“kk”/div
password123/div 针对于usernmaekkpassword123属性就是自定义属性 分组和嵌套选择器
分组选择器使用逗号隔开所有的选择器都是并列的组合(嵌套)选择器使用的是空格隔开选择器不是并列的最终生效的还是最后一个选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv, p,h1 {color: red;}/style
/head
body
div classc1div/div
p classp1ppp/p
h1sas/h1/body
/html 伪类选择器
关键字linkhoveractivevisited 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即可
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylea:hover{color: coral;}/style
/head
body
a hrefhttp://baidu.com点击访问百度/a
/body
/html
在选择器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元素之前插入内容*/p:before {content: 你好啊;color: red;}/*在每个p元素之后插入内容*/p:after {content: [?];color: blue;
}
开头第一个字母修改字体大小和颜色
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.p1:first-letter{font-size:22px;color: chocolate;}/style
/head
body
p classp1仰天大笑出门去我辈岂是蓬蒿人/p
/body
/html
结果
在句子开头前加上符号 .p1:before {content: !!!;添加的内容color: red;颜色} after在末尾加上 .p1:after{content: ;添加的内容color: blue;颜色} 选择器的优先级 比较选择器的优先级高低 1. 选择器相同的情况下 离谁越近就听谁的就近原则. 2. 选择器不同的情况下 行内选择器 id选择器 类选择器 标签选择器 CSS相关属性
宽和高 宽和高 width属性可以为元素设置宽度。 height属性可以为元素设置高度。 块级标签才能设置宽度内联标签的宽度由内容来决定。 默认情况下只有块儿级元素才能设置长、宽内联元素不能设置设置了也不错就是没有效果而已 字体属性 font-weight用来设置字体的字重粗细。 值 描述 normal 默认值标准粗细 bold 粗体 bolder 更粗 lighter 更细 100~900 设置具体粗细400等同于normal而700等同于bold inherit 继承父元素字体的粗细值 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylep{font-family: 宋体; 字体font-size: 18px; 字体大小font-weight500px}/style
/head
body
p孤帆远影碧空尽唯见长江天际流/p
/body
/html 文本颜色 文本颜色 颜色属性被用来设置文字的颜色。 颜色是通过CSS最经常的指定 ● 十六进制值 - 如: FF0000 ● 一个RGB值 - 如: RGB(255,0,0) ● 颜色的名称 - 如: red 还有rgba(255,0,0,0.3)第四个值为alpha, 指定了色彩的透明度/不透明度它的范围为0.0到1.0之间。 文本对齐 text-align 属性规定元素中的文本的水平对齐方式。 left 左边对齐 默认值 right 右对齐 center 居中对齐 右对齐 stylep{text-align: right;}/style
文本装饰 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属性 display:block 默认占满整个页面宽度如果设置了指定宽度则会用margin填充剩下的部分。 display:inline 按行内元素显示此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 display:inline-block 使元素同时具有行内元素和块级元素的特点。 CSS盒子模型 以快递盒为例 1. 快递盒和快递盒之间的举例称为是外边距用margin值表示 2. 快递盒和里面物品之间的举例称为是内边距用padding来表示 3. 盒子的厚度我们称为是边框用border来表示 4. 物品的实际大小称为是content margin:控制元素与元素之间的距离控制元素与元素之间的距离从视觉角度上达到隔开距离的目的。外边距 padding控制内容与边框之间的距离内填充 border边框围绕在盒子的内边距和内容外的边框 content内容盒子的内容显示文本和图像 margin外边距
.margin-test {margin-top:5px;margin-right:10px;margin-bottom:15px;margin-left:20px;
}
也可以直接写
.margin-text{margin-top:5px 10px
顺时针方向上右下左 top right bottom left}
padding内填充
.padding-test {padding-top: 5px;padding-right: 10px;padding-bottom: 15px;padding-left: 20px;
}
