金融企业网站建设公司,上海市建上海市建设安全协会网站,专业做网站建设公司有哪些,深圳商业网站建设哪家好web基础之CSS 文章目录 web基础之CSS一、CSS简介二、基本用法2、CSS应用方式2.1 行内样式2.2内部样式2.3外部样式 三、选择器1、标签选择器2、类选择器3、ID选择器4、选择器的优先级 四、常见的CSS属性1、字体属性2、文本属性3、背景属性4、表格属性5、盒子模型的属性6、定位 总…web基础之CSS 文章目录 web基础之CSS一、CSS简介二、基本用法2、CSS应用方式2.1 行内样式2.2内部样式2.3外部样式 三、选择器1、标签选择器2、类选择器3、ID选择器4、选择器的优先级 四、常见的CSS属性1、字体属性2、文本属性3、背景属性4、表格属性5、盒子模型的属性6、定位 总结 一、CSS简介
CSSCascading Style Sheel层叠样式表。是一组设置样式规则并用于空值页面的外观布局的样式。
作用用于页面的外观美化以及页面组件的布局和定位。
二、基本用法
CSS语法
!DOCTYPE html
htmlheadmeta charsetutf-8titlecss语法/titlestyle选择器{ #表示要修饰的对象属性名:属性值; #修饰对象的具体属性样式样式的取值}/style/headbody/body
/html示例
!DOCTYPE html
htmlheadmeta charsetutf-8titlecss语法/titlestylep{font-size: 20px;color: red;}/style/headbodyp这是一个段落标签/p/body
/html2、CSS应用方式
引用方式一共有三种行内样式、内部样式、外部样式。
2.1 行内样式
被称为嵌入式通过使用HTML 标签的style属性进行定义样式只对设置了style属性的标签起作用。
bodyp这是一个段落标签/pp stylecolor: red; font-style: 宋体;样式的尝试行内样式/p
/body2.2内部样式
被称为内嵌样式在页面头部通过style标签定义对当前页面中所有符合样式的选择器标签都起作用。 headmeta charsetutf-8titlecss语法/titlestylep{color: pink;font-size: 50px;}/style/headbodyp这是一个段落标签/pp样式的尝试内部样式/p/body2.3外部样式
就是在页面文件外单独的创建一个.css 的文件。然后再页面文件中使用 link标签 进行引入。 引用 headmeta charsetutf-8titlecss语法/titlelink relstylesheet typetext/css hrefcss/01.css //headcss文件
h1{color: green;
}
p{color: blueviolet;
}三、选择器
1、标签选择器
也被称为元素选择器使用HTML标签作为选择器的名称。 2、类选择器
使用自定义的名称以 . 点作为前缀然后再通过HTML 标签的Class属性调用类选择器。
注意
调用时不能添加 . 号。同时调用多个类选择器时以 空格 分隔。类选择器名称不能以数字开头。
3、ID选择器
使用自定义名称以#作为前缀然后通过HTML标签的id属性进行名称匹配一对一的关系。
4、选择器的优先级 行内样式ID选择器类选择器标签选择器 因为样式的加载顺序是根据书写顺序进行加载的在同优先级的前提下后加载的会覆盖先加载的同名样式就是就近原则离得越近越优先。 四、常见的CSS属性
1、字体属性
设置字体的相关样式。
属性含义说明font-size大小、尺寸可以使用多种单位font-weight粗细font-family字体font-style样式font简写
!DOCTYPE html
htmlheadmeta charsetutf-8titlecss语法/title!--link relstylesheet typetext/css hrefcss/01.css /--styleh1{color: red;font-size: 50px;}.a{color: blueviolet;font-weight: bold;}#bb{color: green;font-family: 宋体;}.aa{color: aqua;font-style: italic;}/style/headbodyp idbb这是一个段落标签/pp classa样式的尝试内部样式/ph1这是一个大标题/h1p classaa样式/p/body
/html2、文本属性
属性含义说明color颜色line-height行高行之间的高度text-align水平对齐方式取值left、center、rightvertical-align竖直对齐方式取值top、middle、bottom可用于图片和文字的对齐方式
!DOCTYPE html
htmlheadmeta charsetutf-8titlecss语法/title!--link relstylesheet typetext/css hrefcss/01.css /--styleh1{color: red;font-size: 50px;line-height: 50px;text-align: center;}.a{color: blueviolet;font-weight: bold;line-height: 80px;vertical-align:top;}#bb{color: green;font-family: 宋体;text-align: left;}.aa{color: aqua;font-size: 80px;font-style: italic;text-align: right;}/style/headbodyp idbb这是一个段落标签/pp classa样式的尝试内部样式/ph1这是一个大标题/h1p classaa样式/p/body
/html3、背景属性
属性含义说明background-color背景颜色background-image背景图片使用url方式进行指定图片路径
!DOCTYPE html
htmlheadmeta charsetutf-8titlecss语法/title!--link relstylesheet typetext/css hrefcss/01.css /--stylebody{background-color: bisque;!--background-image: url(img/03.png);--}h1{color: red;font-size: 50px;line-height: 50px;text-align: center;}.a{color: blueviolet;font-weight: bold;line-height: 80px;vertical-align:top;}#bb{color: green;font-family: 宋体;text-align: left;}.aa{color: aqua;font-size: 80px;font-style: italic;text-align: right;}/style/headbodyp idbb这是一个段落标签/pp classa样式的尝试内部样式/ph1这是一个大标题/h1p classaa样式/p/body
/html4、表格属性
border-collapse表格中相邻的边框是否合并为单一边框。 取值separated默认 collapse styletable{width: 200px;height: 100px;border: 1px solid red;border-collapse: collapse;}td{border: 1px solid red;}/style5、盒子模型的属性
盒子模型就是网页页面的布局。
width宽度height高度border边框padding内边框margin外边框 盒子的边框border 盒子的边框分为四个方向 1、顶部topborder -top 三个样式分别是1、color 、width、和style 2、右边right border -right 三个样式分别是1、color 、width、和style 3、左边left border-left 三个样式分别是1、color 、width、和style 4、下边bottom border -bottom 三个样式分别是1、color 、width、和style边框样式的取值 1、solid实线、 2、dashed虚线 3、dotted点线 4、double双线
!DOCTYPE html
htmlheadmeta charsetutf-8title盒子模型属性/title!--link relstylesheet typetext/css hrefcss/01.css /--stylep{width: 300px;background-color: aquamarine;}.a1{/* border-top-color:red;border-top-width: 2px;border-top-style: solid;border-right-color: blue;border-right-width: 3px;border-right-style: dotted;主要设置了顶部边框和右边框的属性*/border: 1px solid red;padding: 20px;margin: 10px;}.a2{padding: 30px;}.a3{margin: auto;text-align: center;height: 100px;line-height: 100px;}/style/headbodyp classa1这是一个元素/pp classa2这是二个元素/pp classa3这是三个元素/p/body
/html6、定位
通过position 属性实现对元素的定位在设置定位方式后还需要设置定位属性。 定位常见方式取值如下
取值含义说明static默认值按照常规文档流进行显示relative相对定位相对于标签原来的位置进行定位absolute绝对定位相对于第一个非static定位的父标签的定位fixed固定定位相对于浏览器窗口进行定位 定位属性就是顶部top、左边left、右边right、顶部bottom
1、相对定位
先设置元素的position属性为relative然后再设置定位属性方向性。
2、绝对定位
先设置父标签为非static定位然后设置元素的position属性为absolute最后再设置定位属性也就是方向。
3、固定定位 先将元素的position属性设置为fixed然后再设置定位属性方向。4、z-index元素 通过z-index元素进行设置优先级通过z-index来控制元素的堆叠顺序取值为数字值越大优先级越高。
!DOCTYPE html
htmlheadmeta charsetutf-8title定位/title!--link relstylesheet typetext/css hrefcss/01.css /--style#zhu{width: 900px;border: 1px solid red;position: relative;}.div1{width: 100px;height: 80px;background-color: aqua;position: relative;/* 相对定位 */top: 30px;left: 60px;z-index: -6;}.div2{width: 100px;height: 80px;background-color: bisque;position: absolute;left: 180px;bottom: 80px;z-index: -9;}.div3{width: 100px;height: 80px;background-color: cadetblue;position: fixed;bottom:20px;left: 100px;}.div4{width: 100px;height: 80px;background-color: chartreuse;}/style/headbodydiv idzhudiv classdiv1第一个盒子/divdiv classdiv2第二个盒子/divdiv classdiv3第三个盒子/divdiv classdiv4啥也不做/div/div/body
/html总结
以上就是近期的学习不足之处还望指点。未完待续…
