新媒体营销发展趋势,免费建站网站 seo,宁波新亚建设内部网站,京东商城网站怎么做的自适应文章目录一、CSS是什么#xff1f;语法规范引入方式二、CSS选择器标签选择器类选择器ID选择器通配符选择器后代选择器子选择器并集选择器伪类选择器三、常见元素属性字体属性文本属性背景属性圆角矩形元素的显示默认块级与行级元素盒子模式去除浏览器默认样式弹性布局一、CSS是… 文章目录一、CSS是什么语法规范引入方式二、CSS选择器标签选择器类选择器ID选择器通配符选择器后代选择器子选择器并集选择器伪类选择器三、常见元素属性字体属性文本属性背景属性圆角矩形元素的显示默认块级与行级元素盒子模式去除浏览器默认样式弹性布局一、CSS是什么
CSS(Cascading Style Sheet)样式层叠器用于控制页面表现简单来说就是用于美化页面的效果。
语法规范
选择器(指明要修改谁) 若干属性声明(修改为什么)
stylep {/* 设置字体颜色 */color: yellow;/* 设置字体大小 */font-size: 50px;}
/style我们的style标签可以放在任何位置一般我们放在head标签里。
/* css注释 */我们需要注意CSS注释的格式也可以通过ctrl /快速注释
引入方式
1.内部样式 使用style标签可以把CSS写到html文件中。可以将style标签放到html文件的任意位置但是一般建议放在head标签里 2.内联样式 使用style属性针对指定的元素设置样式
div stylecolor:green我是内联样式/div3.外部样式 将CSS代码单独作为一个.CSS文件然后在html文件通过link属性引入该CSS我们在实际开发中一般使用外部样式让html和CSS分开高内聚低耦合 使用步骤 1.创建一个CSS文件 2.使用link标签引入CSS
link relstylesheet href[CSS文件路径]二、CSS选择器
选择器的功能就是选中指定的标签元素
标签选择器
就是我们上述所介绍到的
style标签名 {/* 设置字体颜色 */color: yellow;/* 设置字体大小 */font-size: 50px;}
/style在{前面写入指定的标签名表明会选中当前页面中的所有指定标签
类选择器
类选择器可以创建CSS类手动去指定我们需要的元素去应用该类
style.one {color: green;}.two {color: red;}.three {color: yellow;}/stylediv class one引入类标签one/divdiv classtwo引入类标签two/divdiv classthree引入类标签three/div类选择器的类名以.开头 标签使用class属性来调用一个类可以被多个元素引入一个元素也可以引入多个类 div class one four引入类标签one 和 four/div我们可以打开浏览器的开发者工具查看一下点击左上角的箭头点击页面指定内容 我们可以发现第一个div应用的样式有三个一个是字体大小一个是字体颜色这两个是我们自己设置的还有一个是div标签自身带的
ID选择器
我们的ID选择器和我们的类选择器很类似我们来看一下有什么区别 1.CSS中使用#开头表示id选择器 style#1 {color: green;}/style2.ID选择器的值必须和HTML元素的id值相同 3.html的元素id不必带# 4.id是元素的唯一标识所以不能被多个标签使用(这也是和类选择器最大的区别
div id 1 引入id选择器 /div通配符选择器
使用*的定义选取所有的标签
* {color: yellow;
}页面所有的内容都会被改成红色
后代选择器
简单说就是把多个基础标签(我们上述所介绍的)组合一下 ol li {color: yellow;}该选择器表示的就是现在页面找到所有的ol然后在ul里面找所有的li 大家注意理解这个后代的含义li不一定是ol的子元素只要是ol的后代元素(孙子元素重孙元素等等)即可.
子选择器
该选择器和子选择器的差别在于只能选择儿子元素 olli {color: yellow;}只在ol的子元素里找li标签
并集选择器
当多个不同的选择器应用同样的样式时我们可以将多个选择器合为一个 比如
.one {colorred;}
.two {colorred;}就可以写为:
.one,.two {colorred;}伪类选择器
该选择器是复合选择器的特殊用法前面的选择器是选中某个元素而我们伪类选择器是选中某元素的具体状态
选择器状态a:link选择未被访问过的链接a:visited选择已经被访问过的链接a:hover选择鼠标指针悬停上的链接a:active选择活动链接(鼠标按下了但是未弹起)
stylediv:active {color: red;}/stylediv按我变色/div我们引入伪类选择器后 我们按下内容会发现变为红色松开鼠标后恢复
三、常见元素属性
字体属性
设置字体 font-family设置我们当前的字体类型微软雅黑宋体黑体等等 style.one {font-family: Microsoft YaHei;}.two {font-family: 宋体;}/style多个字体之间可以用逗号分隔从左到右依次查找如果找不到就使用默认字体 字体大小
stylep {font-size: 15px;}/style不同的浏览器的默认字体大小不一样我们可以明确指定大小单位是px实际上我们设置的是字体中字符框的高度实际的字符可能有偏差 字体粗细 我们通过font-weight来设置字体的粗细设计的时候有两种不同的风格 1.使用单词设置 2.使用数字设置 stylep {font-weight: bold;font-weight: 700;}/style文字倾斜 大家需要注意我们很少将文字倾斜往往是将em / i倾斜的改为不倾斜的 stylep {/* 设置倾斜 */font-style: italic;/* 取消倾斜 */font-style: normal; }/style文本属性
文本颜色 在学习文本颜色之前我们需要先弄清楚我们计算机是如何显示颜色的我们显示器由很多像素组成每个像素视为一个点然后我们使用R(red)G(green)B(blue)三原色混合来标识颜色简称RGB R,G,B三个分量分别使用一个字节表示表示范围0 - 255/00 - FF数值越大表示该成分的颜色越浓255,255,255就表示白色000表示黑色
stylep {color: red;color: rgb(25, 0, 0);color: #ff0000;}/style设置文本颜色的方式有上面三种方式: 1.预定义的颜色值(直接是单词) 2.[最常用] 十六进制形式 3.RGB 方式 VScode也会在设置的比例前显示对应颜色 还有一个技巧如果我们使用十六进制表示如果6位的每两位相同我们就可以缩减为3位 #ff0000 #f00 文本对齐 顾名思义控制文字水平方向的对齐 stylep {text-align: [具体的值];}/style取值有 center居中对齐 left左对齐 right右对齐 文本装饰 对文本加下划线删除线等等不太常用但有一个比较常用因为我们的a标签是自带下划线的不太美观可以用来去掉a标签的下划线 stylep {text-decoration: [具体的值];}/style取值有 none啥都没有可以给a标签去掉下划线 underline下划线 overline上划线 line-through删除线 这个顺序也是我们常用 - 不常用的顺序 我们可以发现a标签自带下划线我们可以使用文本装饰去掉 文本缩进 用于控制段落首行进行缩进 stylep {text-indent: [具体的值];}/style这里的单位有两个选择1.是使用px(在这里不太好控制) 2.使用em(em的大小就是当前元素文字的大小) 当缩进值是负的时代表左缩进 行高 简单理解一个行高 文字高度 行间距 大概就是两条绿色线之间的高度我们可以通过调节行高和字体高度来动态调节行间距 stylep {line-height: [行高值];}/style我们来调节字体高度和行高来调节一下行间距
背景属性
背景颜色 我们背景颜色默认是透明的我们可以手动的进行设置 style.1 {background-color: [指定颜色];}/style背景图片 stylep {background-image: url(...);}/stylestylebody {background-image: url(小姐姐.jpg);}/style我们为我们的body元素设置了一个背景图片我们可以发现默认图片时平铺的如果不想平铺我们可以手动设置 背景平铺 stylep {background-repeat: [平铺方式];}/style取值 repeat平铺 no-repeat不平铺 repeat-x水平平铺 repeat-y垂直平铺 默认是repeat平铺的背景颜色和背景图片时可以同时存在的背景图片在北京颜色的上方
背景位置
background-position: x y;
修改图片的位置参数有三种类型 方位名词: (top, left, right, bottom)精确单位: 坐标或者百分比(以左上角为原点)混合单位: 同时包含方位名词和精确单位 大家需要注意这里的坐标系,如果我们只给了一个参数那么另一个参数默认居中 背景尺寸
background-size: length|percentage|cover|contain;设置背景大小有不同的参数 设置具体的长宽 可以设置百分比是以父类为基准 cover完全覆盖背景区域 contain将图像是等比例扩展到最大尺寸 大家需要注意cover与contain的区别如果背景是矩形时差别还是比较大的
背景体验
style.one {width: 500px;height: 300px;background-image: url(小姐姐.jpg);background-repeat: no-repeat;background-position: center;background-size: contain;}/style圆角矩形
我们html元素默认都是举行的但有时矩形不太美观我们就可以将边框设置为带圆角的效果
border-radius: length;大家需要注意我们传入的这个参数是什么,length是内切圆的半径数值越大越圆
style.one {width: 200px;height: 200px;border: 2px solid;border-radius: 50%;}/style元素的显示默认
块级与行级元素
我们html标签的显示模式(块级还是行级)都是可以手动设置的 块级元素 h1 - h6 p div ul ol li 我们最常用的就是就是div块级元素块级元素有以下特点 1.独占一行 2.高度宽度内外边距行高都可以控制 3.宽度默认和父元素一样宽 4.十一个容器(盒子)里面可以放块级和行级元素(文字类元素内不能放块级元素例如p标签主要用于存放文字内部不能放块级元素)
行内元素 a strong b em i del s span span就是一个常见的行级元素行级元素有以下特点 1.不独占一行一行可以放多个 2.设置高度宽度行高是无效的 3.左右边距有效内边距有效 4.默认宽度为本身 5.行内元素只能容纳文本和其他行内元素不能放块级元素
块级元素和行内元素区别 1.块级元素独占一行行内元素不独占一行 2.块级元素高度宽度内外边距是可以设置的。 行内元素高度宽度行高均无效左右边距内边距有效 3.块级元素默认和父元素一样宽行内元素默认和内容一样宽 设置显示模式 我们可以使用display来修改元素的显示默认可以将div设置为行内元素也可以将span设置为块级元素我们最常使用的是将行内元素设置为块级元素
display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素盒子模式
我们可以将每一个HTML元素相当于一个矩形的盒子 我们可以看到一个盒子由以下几部分组成内容(content)内边距(padding)边框(border)外边距(margin) 边框 设置边框一般要设置三个方面 1.边框的粗细 2.边框的颜色 3.边框的风格(实现虚线点线等)
border-width 边框粗细
border-color 边框颜色
border-style 边框样式(solid实线,dashed虚线,dotted点线)border属性可以之间设置四个方向border-leftborder-rightborder-topborder-bottom 同时也支持简写
border: 1px solid red;上面这些顺序是没有要求的可以任意调整 边框撑大盒子 我们刚设置元素的长宽为 但当我们加了边框后发现盒子的大小并不是300 * 200 而是304 * 204默认情况下边框会撑大盒子但我们实际并不希望边框撑大盒子所以我们就需要手动来设置:
* {box-sizing: border-box;
}当我们加了上述属性后发现再次设置边框时盒子并没有被撑大 内边距 我们内容默认是挨住边框来放置的我们可以通过padding来控制内容与边框的距离 同样可以给四个方向设置padding-toppading-bottompadding-leftpadding-right
padding: 10px;上下左右都是10px
padding: 10px 20px:上下边距10px左右边距20px
padding: 10px 20px 30px 40px;上右下左分别是10px 20px 30px 40px我们可以通过浏览器开发者工具去选中元素查看具体的盒子模型的边距 外边距 用来控制元素和元素之间的距离 同样可以设置四个方向的外边距margin-topmargin-bottomargin-leftmargin-right
margin: 10px;上下左右都是10px
margin: 10px 20px:上下边距10px左右边距20px
margin: 10px 20px 30px 40px;上右下左分别是10px 20px 30px 40px特殊用法 把margin-left 和 margin-right设置为auto代表让浏览器自动去调节该元素在父元素的居中位置 大家需要注意这个水平居中与text-align是不一样的margin: auto是给块级元素用的text-align: center是让行内元素或者行内块元素居中的
去除浏览器默认样式
浏览器会给元素加上一些默认样式不同浏览器会存在差别为了消除这种差异所以我们往往都会将这些默认样式去除
*{margin: 0;padding: 0;
} 弹性布局
弹性布局主要是为了解决水平排列的问题我们行内元素虽然都是在水平上排列的但水平布局是不可控的弹性布局是更加合适的 开启弹性布局
displayflex;当我们开启弹性布局后我们弹性布局里的元素不再是行内元素了而是弹性元素我们就可以设置边距了
设置水平排列方式
justify-content: space-between;设置垂直方向的排列方式
align-itemscenter;stylediv {width: 300px;height: 200px;display: flex;justify-content: space-around;align-items: center;}span {width: 60px;height: 40px;background-color: red;}/styledivspanone/spanspantwo/spanspanthree/span/div
