前端--CSS 一丶CSS简介二丶引入方式1.style标签的方式/内部样式表2.html标签当中style属性/行内样式表3.外部样式表 三丶选择器基础选择器<1>标签选择器<2>类选择器<3>id选择器<4>通配符选择器<5>总结 复合选择器<1>后代选择器<2>子选择器<3> 并集选择器<4> 伪类选择器<5>focus伪类选择器 四丶常用元素属性字体属性 + 文本属性<1>设置字体<2> 大小<3>粗细<4>倾斜<5>文本颜色<6>文本对齐<7>文本装饰<8>文本缩进<9>行高 文本相关代码背景属性<1>背景颜色<2>背景图片<3>背景平铺<4>背景位置<5>背景尺寸 背景相关部分代码圆角矩形<1>基本用法<2>生成原形<3>生成圆角矩形 五丶盒模型边框内边距外边距 六丶总结 一丶CSS简介
CSS就是层叠样式表,是一种描述HTML文档样式的语言。其描述应该如何现实HTML元素,它节省了大量的工作。
二丶引入方式 1.style标签的方式/内部样式表它是写在style标签中,嵌入到html的内部,虽然说style放在哪里都可以,但是规范来写一般都是放在head标签当中的。
写 法 \color{red}{写法} 写法 展 现 效 果 \color{red}{展现效果} 展现效果
对于内部样式表来说,这种引入方式虽然可以让样式和页面结构分离,但是分离的不够彻底,尤其是css内容变得多的时候。
2.html标签当中style属性/行内样式表这种方式使用过style属性,来指定某个标签的样式。这种写法优先级较高,所以不能写太过于复杂的样式,不然很容易造成覆盖。
写 法 \color{red}{写法} 写法
展 现 效 果 \color{red}{展现效果} 展现效果
3.外部样式表这种方式我们实际开放当中,用到的也是最多的。具体方式:
1.创建一个css文件 2.使用link标签引入css写 法 \color{red}{写法} 写法
展 现 效 果 \color{red}{展现效果} 展现效果
三丶选择器选择器是用来选中页面指定的标签元素。
基础选择器 <1>标签选择器这种选择器,会把所有选择器指定的标签都设置为选择器设置的样式。虽然很简便,但是没有差异性。
<style> p { color: red; } </style> <p>1111111111</p> <p>2222222222</p> <p>3333333333</p>写在hmtl文件里如下: 网页上展示如下:
<2>类选择器标签可以设置多个class类,中间用空格间隔,一个class类,可以使用在多个标签当中。语法如下:
<style> .blue { color: blue; } </style> <div class="blue">咬人猫</div> <div>咬人猫</div编辑器书写如下: 页面展示如下: 这种写法有一些地方是需要我们注意的:
1.类名用 . 开头的 2.下方的标签使用 class 属性来调用. 3.一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用) 4.如果是长的类名, 可以使用 - 分割. 5.不要使用纯数字, 或者中文, 以及标签名来命名类名.
<3>id选择器id选择器和类选择器类似,使用方法也大致是一样的。
<style> #ha { color: red; } </style> <div id="ha">蛤蛤蛤</div>VS中书写如下:
实际展示效果如下: 关于id选择器需要注意一下:
1.CSS 中使用 # 开头表示 id 选择器 2.id 选择器的值和 html 中某个元素的 id 值相同 3.html 的元素 id 不必带 # 4.id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)
<4>通配符选择器这种选择器一般在特殊情况下使用,用来选择所有的标签。他会使用" * "来选择所有的标签。
* { color: red; }具体在VS中书写如下: 实现效果如下:
<5>总结 复合选择器 <1>后代选择器 元素1 元素2 {样式声明}这里元素1和元素2使用空格分割,元素1是父级,元素2是子级,只选取元素2,不影响元素1。
在VS中书写如下: 具体展现效果: 如果想要把水果底下黑色字体也改为红色,那么这里的
ul li{ color:red } 改为: li{ color:red } <2>子选择器子选择器和后代选择器类似,但是只能选择子标签,只选亲儿子,不选孙子元素。
元素1>元素2 { 样式声明 } /*注释:这里是使用 > 号来进行分割的*/这里特别来实验一下二者的区别,如果我们使用后代选择器的写法: 这里后代都会变成红色。 但是如果我们使用了子选择器的写法,因为子选择器只能选择自己的亲孩子,不对孙子影响。 所以这里最后的显示如下:
<3> 并集选择器并集选择器是用来选择多组标签。(集体声明) 我们在使用中,要注意如下的点:
通过逗号分割多个元素 表示同时选中元素一和元素二 任何基础选择器都可以使用并集选择器 并集选择器建议竖着写,每个选择器占一行(最后一个选择器不能加逗号)
在VS中书写如下:
在网页中的具体展现效果如下: 这里我们想要谁呈现红色,就把它往里面加就可以,但是注意格式,它是竖着写的。
<4> 伪类选择器伪类选择器主要有四种
a:link 选择未被访问过的链接 a:visited 选择已经被访问过的链接 a:hover 选择鼠标指针悬停上的链接 a:active 选择活动链接(鼠标按下了但是未弹起)
然后书写也很容易,如图: 在网页中显示如下: 然后就会有我们设置的四个样式。 但是这里有个小问题,就是我们实验完毕之后,第二次打开还是我们第一次点击之后的样式,这里我们需要清除我们的浏览记录。然后就会恢复如初了。
<5>focus伪类选择器这个选择器作用是获取焦点的元素设置样式,失去焦点后,会还原为原有的样式。
VS中书写如下:
在网页上显示的话就是我们正在输入的框为红色,其他的不输入的或者输入完毕的都为黑色。
四丶常用元素属性 字体属性 + 文本属性这一部分的话就先写理论知识,然后代码单独拉一个板块来展示。
<1>设置字体我们可以在网页中使用自己喜欢的字体,当然这里就不展示有那些了,读者们可以在CSS手册查询。 我们在设置字体的时候,需要注意这些地方。
1.字体名称可以用中文, 但是不建议. 2.多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. ) 3.如果字体名有空格, 使用引号包裹. 4.建议使用常见字体, 否则兼容性不好.
具体设置如下:
font-family: '微软雅黑'; font-family: 'Microsoft YaHei'; <2> 大小我们在HTML中学习了字体设置就是用h1~h6来进行设置,那么我们在CSS中也是有着属于自己的方式来进行设置的。
font-size: 20px;这里也是有些地方需要我们注意的
1.不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px) 2.可以给 body 标签使用 font-size 3.要注意单位 px 不要忘记. 4.标题标签需要单独指定大小
<3>粗细格式如下:
font-weight: bold; font-weight: 700;这里注意啦!
1.可以使用数字表示粗细. 2.700 =bold, 400 是不变粗, = normal 3.取值范围是 100 -> 900
<4>倾斜格式如下:
/* 设置倾斜 */ font-style: italic; /* 取消倾斜 */ font-style: normal; <5>文本颜色所有的颜色都是由三原色构成,计算机里也是如此,根据三原色的不同比例,混合出了五彩斑斓的颜色。
color: red; color: #ff0000; color: rgb(255, 0, 0); <6>文本对齐控制文字水平方向的对齐.
text-align: [值];这里的值有三个:
center: 居中对齐 left: 左对齐 right: 右对齐
<7>文本装饰文本装饰有四种方式:
text-decoration: [值];这里的四种方式就是取决于值是什么
underline 下划线. [常用] none 啥都没有. 可以给 a 标签去掉下划线. overline 上划线. [不常用] line-through 删除线 [不常用]
<8>文本缩进控制段落的首行缩进 (其他行不影响)
text-indent: [值];这里的值就是缩进的多少,这个由我们自己决定。
单位可以使用 px 或者 em. 使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小. 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了
<9>行高行高指的是上下文本行之间的基线距离
HTML 中展示文字涉及到这几个基准线: 1.顶线 2.中线 3.基线 (相当于英语四线格的倒数第二条线) 4.底线
写法如下:
line-height: [值];这里需要注意了!
1.行高 = 上边距 + 下边距 + 字体大小 2.行高也可以取 normal 等值 3.行高等与元素高度, 就可以实现文字居中对齐
文本相关代码 <!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> #s1{ /*设置字体*/ font-family: 'Microsoft YaHei'; /*设置字体大小*/ font-size: 40px; /*字体粗细 100 ~900 数值或者bold粗体*/ font-weight: 100; /*字体倾斜加italic,normal正常*/ font-style: italic; /*设置字体颜色*/ color:red; } #s2{ /*设置字体*/ font-family: '宋体'; /*设置字体大小*/ font-size: 20px; /*字体粗细*/ font-weight: 900; /*字体倾斜*/ font-style: normal;/*所以这玩意加不加有啥用处,没用处呀*/ /*设置字体颜色*/ color:rgb(255,0,0); } /*文本对齐方式*/ #d1{ text-align: left; } #d2{ text-align: center; } #d3{ text-align: right; } </style> </head> <body> <!--这里是id选择器的写法--> <span id="s1"> 微软雅黑 </span> <span id="s2"> 宋体 </span> <div id='d1'>靠左</div> <div id='d2'>居中</div> <div id='d3'>靠右</div> <div> <p style="text-decoration: none;">啥都没有</p> <p style="text-decoration: overline;">上划线</p> <p style="text-decoration: line-through;">删除线</p> <p style="text-decoration: underline;">下划线</p> </div> <p style="text-indent: 2em;">首行向右缩进两个文字</p> <p style="text-indent: -2em;">首行向左缩进两个文字</p> <!--文本占据的高度,注意文本上边和下边可能有空白区域--> <div style="line-height:60px; font-size: 40px;">看看行高60px,字体40px的效果</div> <div style="line-height:60px; font-size: 60px;">看看行高60px,字体60px的效果</div> </body> </html>对应的显示效果如下
背景属性背景相关的代码也同上。
<1>背景颜色 background-color: [指定颜色]这里的颜色设置同上文本颜色设置
<2>背景图片 background-image: url(...);这里有几个点需要注意的
url 不要遗漏. url 可以是绝对路径, 也可以是相对路径url 上可以加引号, 也可以不加. <3>背景平铺 background-repeat: [平铺方式]这里的平铺方式是我们自己选择的,有以下几种:
repeat: 平铺 no-repeat: 不平铺 repeat-x: 水平平铺 repeat-y: 垂直平铺
<4>背景位置 background-position: x y这里的位置要我们自己设定,有三种设置方法:
方位名词: (top, left, right, bottom)精确单位: 坐标或者百分比(以左上角为原点)混合单位: 同时包含方位名词和精确单位那么这里需要注意的地方在哪里呢?
如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效) 2.如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. ) 3.如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200) 4.如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中. 5.如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中)这里说一下屏幕上,也就是计算机里面x轴和y轴的图像
<5>背景尺寸 background-size: length|percentage|cover|contain;这里注意:
1.可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px, 2.也可以填百分比: 按照父元素的尺寸设置. 3.cover: 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 4.把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域.
背景相关部分代码 <!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>Document</title> </head> <body> <!--背景颜色--> <div style="width: 500px; height: 100px; background-color: red;"></div> <!--背景图片--> <div style="background-image: url('rose.jpg'); height: 220px; width: 220px;"></div> <!--背景图片平铺 repeat是x和y轴都会平铺,--> <div style="background-image: url('rose.jpg'); height: 220px; width: 880px; background-repeat: repeat;"></div> <!--背景图片位置(background-position)。top为y轴最上,bottom为y轴最下,left为x轴最左,right为x轴最右--> <div style="background-image: url('rose.jpg'); height: 550px; width: 200px; background-repeat: no-repeat; background-position: top; background-color: rgb(183, 0, 255);"></div> <!--背景图片尺寸(background-size):cover长款都扩展,可能有部分展示不完整--> <div style="background-image: url('rose.jpg'); height: 500px; width: 800px; background-repeat: no-repeat; background-color: rgb(255, 0, 0); background-size: contain;"></div> </body> </html>由于不便截图,所以这里的网页我就不放出来了。
圆角矩形圆角矩形是通过 border-radius 使边框带圆角效果。
<1>基本用法 border-radius: length;这里的length指的是哪个角的半径,length越大,弧线就越大。
代码如下:
width: 500px; height: 200px; border: 10px solid red;/*线条的宽度*/ border-radius: 10px;/*角的圆润程度*/ <2>生成原形让 border-radius 的值为正方形宽度的一半即可
代码如下:
width: 300px; height: 300px; border: 2px solid red; border-radius: 150px;/*生成圆形*/ <3>生成圆角矩形让 border-radius 的值为矩形高度的一半即可
代码如下:
width: 300px; height: 150px;/*其中一个是另外一个的一半*/ border: 2px solid red; border-radius: 150px;/*生成圆角矩形*/ 五丶盒模型HTML就相当于一个矩形的盒子。主要有四部分:
1.边框 border 2.内容 content 3.内边距 padding 4.外边距 margin
边框边框属性有三个
粗细: border-width 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框 颜色: border-color
我们可以设置这三个属性然后调整我们边框的属性。 代码如下:
width: 500px; height: 200px; border: 1px solid red;在VS中整体代码如下: 边框在网页中显示如下:
内边距padding 设置内容和边框之间的距离 就是如果说我们之前的写法是这样
height: 200px; width: 300px; border: 2px solid blueviolet;用来设置长和宽,然后我们加入padding之后:
width: 300px; height: 200px; border: 2px solid blueviolet; /* 设置内边距 */ padding-top: 10px; padding-left: 20px; /* 如果四个方向都要设置内边距,直接padding一次到位就好了*/ padding: 20px;可以很明显的看到和边框之间有了距离。
当然我们还可以再具体一点:
padding: 5px; 表示四个方向都是 5px padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)就是顺时针方向转一圈。
外边距外边距控制盒子和盒子之间的距离,写法和上面类似。
可以给四个方向都加上边距 margin-top margin-bottom margin-left margin-right
然后这里贴一下在VS上的代码:
<!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>Document</title> <style> #d1{ width: 200px; height: 50px; border: 2px solid red; /*两个div要间隔一定距离,只需要设置其中一个div就好了*/ margin-bottom: 20px; } #d2{ width: 200px; height: 50px; border: 2px solid blue; margin-top: 20px; } </style> </head> <body> <div id="d1">水果</div> <div id="d2">蔬菜</div> </body> </html>对应部分具体展示效果如下: 当然我们也可以具体,像内边距一样
margin: 10px; // 四个方向都设置 margin: 10px 20px; // 上下为 10, 左右 20 margin: 10px 20px 30px; // 上 10, 左右 20, 下 30 margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40 六丶总结知识点其实不太难,但是多,所以还是要多练。
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签: #JavaWebCSS基础 #并集选择