一、从什么是CSS开始(百度一下,你也知道)
CSS:Cascading Style Sheet 层叠样式表。是一组样式设置的规则,用于控制页面的外观样式。
1、特点:
实现内容与样式的分离,便于团队开发;
样式复用,便于网站的后期维护;
页面的精确控制,让页面更精美
2、CSS引用方式:
1.内嵌样式
写在标签属性的位置,style="color:red"引号内写css属性和值
形式也是键值对,通过:连接,通过;分隔
需要尽量避免代码重复
优点:精准,明确样式写在那个元素上
缺点:代码重复,页面元素过多时无法统一设置样式
不建议使用
2.行内样式
也称为嵌入样式,在html中写一个style标签
语法:选择器,声明块
选择器:用于选中页面元素
声明块使用{}包围,用于设置元素样式
声明块的语法键值对,通过:连接,通过;分隔
优点:可同时选中多个页面元素
缺点:只对当前页面生效
3.外部样式
单独写一个样式文件,文件后缀是.css,需要通过link标签引入任一html文件中
优先级:行内样式>内联样式>外部样式(距离页面元素代码越近的样式,优先级越高)
二、选择器
1、基础选择器
1.标签/元素选择器
使用HTML标签作为选择器的名称。
以标签名作为样式应用的依据。
2.类选择器
使用自定义的名称,以 .
号作为前缀,然后再通过HTML标签的class属性调用类选择器。
以标签的class属性作为样式应用的依据。
3.ID选择器
使用自定义名称,以 #
作为前缀,然后通过HTML标签的id属性进行名称匹配。
以标签的id属性作为样式应用的依据,一对一的关系。
4.伪类选择器
根据不同的状态显示不同的样式,一般多用于标签。
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标悬浮到连接上,即移动在连接上时触发
:active 选定的链接,被激活
5.子元素选择器
6.属性选择器
7.通配选择器
优先级:行内样式>ID选择器>类选择器>元素/标签选择器
三、属性
建议直接去浏览器上找完整的属性表,以下仅供参考
font属性:font:font-style font-weight font-size font-family
background属性:background:background-color background-image background-repeat
background-position
列表属性:list-style-type取值:none、disc、circle、square、decimal
list-style属性:list-style:list-style-type list-style-image list-style-position
四、盒子模型
盒子模型是网页布局的基础,将页面中所有元素都看作是一个盒子,盒子都包含以下几个属性:
盒子模型的组成部分:
1、margin--外边距
属性:
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
2、border--边框
属性:
border-width 边框粗细
border-style 边框样式
border-color 边框颜色
样式:
none:没有边框即忽略所有边框的宽度
solid:边框为单实线
dashed:边框为虚线
dotted:边框为点线
3、padding--内边距
属性:
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
padding: 上内边距 右内边距 下内边距 左内边距
4、content--内容区
属性:width,height
五、浮动与定位
浮动:
1、如何设置浮动
通过控制属性float来控制元素的位置
float取值:
left:向左浮动 right:向右浮动 none:没有浮动
2、什么是文档流
文档中可显示的元素在排列时候的开始位置以及他们所占的区域。因为页面中的元素分为不同的种
类,所以他们会按各自的特点去显示,在页面中所占的区域不是一样的。会按从上到下,从左到右
的顺序输出内容。
3、设置浮动后元素脱离文档流会导致父元素高度塌陷,如何解决?
用clear清除 语法:选择器{clear:属性值;}
left 不允许左侧有浮动元素(清除左侧浮动的影响)
right 不允许右侧有浮动元素(清除右侧浮动的影响)
both 同时清除左右两侧浮动的影响
定位:
1、相对定位(relative):相对于一个元素的正常位置来对其定位。"left:20" 会向元素的 LEFT 位
置添加 20 像素。
2、绝对定位(absolute):使用绝对值来对元素进行定位。"left", "top", "right","bottom"
3、固定定位(fixed):相对于浏览器窗口来对元素进行定位。"left", "top", "right","bottom"
4、粘滞定位:position:sticky;开启粘滞定位,和相对定位的特点基本一致;不同的是粘滞定位
可以在元素到达某个位置时将其固定,不随滚动条滚动而滚动。相对于body元素。
在下只是一个前端初学者,如有写得不好的地方,敬请斧正。