前端网页三剑客------CSS基础

一、三种引入CSS的方式

1、行内样式：在指定标签元素内部 添加style属性，配置css效果，多个效果之间有分号隔开。缺点： 代码可重用性比较低，可维护性比较低,可读性比较低2、内部样式：在head标签内，添加style标签，style标签的标签体内容就是css代码。通过选择器配置优缺点: 如果只控制当前页面的标签样式的话使用内部样式, 复用性不好3、外部样式：在head标签内部，使用link标签引入外部资源，实现内容和样式分离。语法：<link type="text/css" rel="styleSheet"  href="CSS文件路径" />优缺点：复用性强，一个css样式可以控制多个页面。复用性：外部样式>内部样式>行内样式优先级：就近原则。行内样式==》内部样式==》外部样式

二、CSS基本语法

方式一：选择器{属性1:属性值;属性2:属性值;属性3:属性值;... }方式二：选择器{属性1:属性值;属性2:属性值;属性3:属性值;...} 选择器：指css样式作用的HTML对象。
{}：限定范围，指当前花括号内的所有样式都属于当前选择器。

三、选择器

1、基本选择器【标签、id、类】

标签选择器：标签名{样式一;样式二;....}id选择器：#id{样式一;样式二;....}类选择器：【类名是class属性的值】.类名{样式一;样式二;...}

2、其他选择器【全局、伪类】

全局选择器：*{样式一;样式二;....}伪类选择器：【主要用于超链接】a:link{} 未被访问时a:visited{} 访问过后a:hover{} 鼠标悬浮时a:active{} 鼠标激活时(鼠标左键按住超链接，不放开

四、常用样式：

1、尺寸样式：width：宽度height：高度2、字体样式：font-size：字体大小font-style：字体风格【italic:斜体；normal:默认值】font-family：字体类型(取值：隶书/微软雅黑...)font-weight：字体粗细【Normal：默认值；bold 粗体字符；bolder 更粗的字符；lighter 定义更细的字符】3、文本样式：color：文本颜色text-align：水平对齐方向【left/right/center...】text-decoration:文本装饰线【none默认。underline下划线。 overline上划线。line-through删除线】line-height：行高【当元素高度和行高一致，元素内的文本自动垂直居中】text-indent：首行缩进text-shadow：文本阴影四个参数 h-shadow v-shadow blur color; 第一个参数 x轴偏移量； 第二个参数y轴偏移量； 第三个参数 阴影范围；第四个参数阴影的颜色4、边框样式：【border：粗细 风格 颜色】border-width：边框粗细border-color：边框颜色border-style：边框风格【dashed 虚线，solid 实线，dotted 点线，double 双实线】border-radius：倒圆角指定方向：border-top：上边框border-bottom：下边框border-left：左边框border-right：右边框5、背景样式：background-color：背景颜色background-image：背景图片background-repeat：是否平铺background-position：偏移

五、盒子模型

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距属性解析：内边距【padding】:也叫填充，设置元素内容与元素边框之间的距离。有四个取值：padding-(top/bottom/left/right) 一个值：padding:20px; 表示四个方向都是20px两个值：padding:20px 30px ; 表示上下是20，左右是30三个值：padding:10px 20px 30px;表示上10px，右20px，下30px，左同右20px四个值：padding:10px 20px 30px 40px; 上右下左外边距【margin】：也叫空白边，位于盒子的最外围，设置不同元素之间, 它们边框与边框之间的距离。 取值同padding

六、浮动样式【float】

元素设置浮动后就会脱离标准文档流，会对页面中其他未设置浮动的元素排版产生影响。
浮动属性的取值有三个：left：元素左浮动     right：元素右浮动    none：默认值，不浮动clear：清除浮动

七、定位样式【position】

left：相对x轴偏移； top：相对y轴偏移

1.relative 相对定位
相对元素原来的位置定位,定位完成后可以去偏移(移动),不会脱离标准文档流,不影响后续元素正常排版。
会留白2.absolute 绝对定位
绝对定位后，脱离文档流,位置移动看父标签中有没有定位，如果有定位则相对父标签偏移，如果父标签没有定位，相对<body>标签偏移.绝对定位会影响后续元素排版，原来的位置不留白

素原来的位置定位,定位完成后可以去偏移(移动),不会脱离标准文档流,不影响后续元素正常排版。

会留白

2.absolute 绝对定位
绝对定位后，脱离文档流,位置移动看父标签中有没有定位，如果有定位则相对父标签偏移，如果父标签没有定位，相对标签偏移.绝对定位会影响后续元素排版，原来的位置不留白

前端网页三剑客------CSS基础相关推荐

前端网页三剑客------JavaScript基础
前端网页三剑客------JavaScript基础一.基础语法 1.引入方式行内JS:在标签内部编写JS代码,配合事件使用.<input type="button" val ...
前端网页三剑客------HTML基础
前端网页三剑客------HTML基础一.HTML基础语法基本语法包含:标签和属性 1. 文件的后缀 .html .htm 2. 标签由尖括号包围的关键词 <html> <hea ...
Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
厚积薄发前端学习笔记 CSS基础篇-左侧固定，右侧自适应（或右侧固定，左侧自适应）布局方法...
这是我们经常可能会遇到到一种布局方法,或者是右侧固定,左侧自适应,下面列出我归纳总结的几种方法,是实际开发中比较常用和实用的几种方法 GitHub项目链接写在前面归纳总结了几种比较ok的方法,左右 ...
网页设计全套视频教程(html,网页三剑客,CSS,Flash,ASP,Photoshop)
此视频教程包括网页三剑客的操作使用,html语言,DIV+CSS网页样式与布局,Flash动画的制作,ASP语言,ASP网页的制作,Photoshop视频教程. 以上教程为网上搜集,可以免费下载,供学 ...
我的前端学习之CSS基础--选择器、字体、非布局样式、背景
CSS基础选择器半透明,可叠加,第一张的padding,第二张的font-size,第三张的background <style>body{padding :10px; font-siz ...
前端之网页三剑客Css之弹性布局Flex作用
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. <div cl ...
前端html和css基础知识
第一天常用的浏览器和内核 1.谷歌(chrome)前端工程师必备 2.firefox 火狐 3.safari iphone ipad 苹果 4.IE/Edge微软 5.Opera 欧鹏 HTML骨架 ...
零基础学前端开发之CSS基础
第三章:CSS3样式基础知识点: 1.CSS概念 2.CSS语法格式 3.CSS的使用 4.三类范围为什么使用CSS 化妆前: 化妆后: HTML语法,在网页上显示数据,第一章p br b fon ...

前端网页三剑客------CSS基础

前端网页三剑客------CSS基础

一、三种引入CSS的方式

二、CSS基本语法

三、选择器

四、常用样式：

五、盒子模型

六、浮动样式【float】

七、定位样式【position】

前端网页三剑客------CSS基础相关推荐

最新文章

热门文章