css小总结

最新推荐文章于 2024-01-10 20:55:58 发布

红烧牛肉面-加面

最新推荐文章于 2024-01-10 20:55:58 发布

阅读量104

点赞数

分类专栏： vue 文章标签： css

本文链接：https://blog.csdn.net/qiushirufeng/article/details/107254103

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

这里总结一下这个星期所学的css样式和一些解决遇到问题的小技巧！

基本的css小知识
- - 这些小知识可以自己动手写一个页面，领略一下css带给你不一样的色彩吧。
一 css能做什么？ css这么导入html？怎么选中想改变样式的盒子？
- css全称之为层叠样式表（Cascading Stylesheet）
- - - 男盒子和女盒子：
引入了css文件可以写一些基本的css样式啦！！！！
如何美化页面？？？

基本的css小知识

这些小知识可以自己动手写一个页面，领略一下css带给你不一样的色彩吧。

一 css能做什么？ css这么导入html？怎么选中想改变样式的盒子？

css全称之为层叠样式表（Cascading Stylesheet）

在页面用CSS，对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制（让页面变得漂亮，有情调）

男盒子和女盒子：

    男盒子：男标签、块级元素
    女盒子：女标签，行内元素，不能设置宽高

css的导入方式：
1，行内：当想对某一个小的盒子进行设置时，会用<div style=""></div>来做一些少量的设置。
2，内部：在html文件内部，在head部分 `在这里导入。

<head>
    <meta charset="UTF-8">
    <style>
    </style>
</head>

3，外部：在html文件外部，用link引入

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css地址">
</head>

引入了css文件可以写一些基本的css样式啦！！！！

如何美化页面？？？

font字体美化！！！

font-family； 设置字体可以放置多个选项，具体显示效果根据自己的电脑所装字体而异！

font-size 设置字体的大小，一般14px（注意带像素）

font-weight设置字体的粗细 normal 默认值。 bold 定义粗体字符。 bolder 定义更粗的字符。 lighter 定义更细的字符。

color设置字体颜色可以直接跟颜色，也可以直接跟颜色的十六进制，还可rgb（0.0.0）进行设置。

文本字体样式设置！！！

text-algin水平方向对齐方式（center left right ）
taxt-decoration主要用途来消除a标签的下划线。
text-index 文本缩进，主要用于段落首行缩进单位rm。
lineheight 行高设置，到行高与父元素的height一样高时，子元素会竖直居中。

background背景样式！！！

背景颜色 background-color

背景图片 background-image

background-repeat 背景图片平铺
no-repeat 不平铺
repeat 平铺
repeat-x repeat-y 沿xy轴平铺
background-position 当背景图片很大时可以用这个来进行定位。来选中想要的部分或者图片。

浮动float

float 浮动的主要作用让块级元素并排显示(仅对我而言）

float-left
float-right
float-none

float 造成的影响

对父级元素造成的影响；如果父元素内部全部浮动会导致父元素的高度为0（塌陷）

对兄弟元素造成的影响；元素最开始的位置发生改变

如何处理float所造成的影响

overfloat-hidde 清楚对父元素的影响也可以直接对父元素添加高度来解决

盒子模型

margin 外边距
padding 内边距
border 边框

margin 边框到body边框的距离

margin:10px 5px 15px 20px;
上右下左
margin:10px 5px;
上下10 左右5px
单独的还有 margin-top，left ， right bottom
可以单独设置值。

padding 内容到同级边框的距离用法同margin

border

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：

border-width
border-style ；
dotted 定义点状边框。在大多数浏览器中呈现为实线
solid 定义实线。

border-color
例子 border ：1px solid red ；

2020-7.14 当写页面时，达不到自己的结果时该怎么办？？？？

第一，首先查看自己的class选择器是否真的选中了元素，起类名时一定要起的简单明了（切记不能用拼音,当时可能记得很清楚。过了两天都不知道代码是不是自己写的），最好是使用英语（驼峰命名法），提高代码的阅读性(看着很整洁，高大上的感觉）！！！

第二
一定要使用开发者工具（这个真的巨好用 f12即可）选中元素后可以看值，多选中几个盒子进行查看，一般都会解决。
第三
仔细阅读自己的代码，看看盒子是否继承了父盒子的元素。子元素浮动时，要考虑父元素是否坍塌，如果子元素不并排显示，考虑父盒子的宽度是否足够。兄弟元素没有在标准文档流的位置用clear：both清除（对兄弟元素的影响）

第四当一个构思一个页面时，要思考用适当的盒子(这样可以避免很多不必要的麻烦）现在的代码顺序首先写结构（加注释）然后写html （结构层）然后css(表示层） (目前还在学js…)

**写好了结构再往里面填内容，就很容易实现想要的效果了。如果不行不要放弃哦，打开f12即可，看一看总会知道是什么引起的！！！！**

                       大鹏一日同风起，扶摇直上九万里！

未完待续…

红烧牛肉面-加面

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css小总结

这里总结一下这个星期所学的css样式和一些解决遇到问题的小技巧！基本的css小知识这些小知识可以自己动手写一个页面，领略一下css带给你不一样的色彩吧。一 css能做什么？ css这么导入html？怎么选中想改变样式的盒子？css全称之为层叠样式表（Cascading Stylesheet）引入了css文件可以写一些基本的css样式啦！！！！如何美化页面？？？font字体美化！！！文本字体样式设置！！！background背景样式！！！背景颜色 background-color背景图片 backg
复制链接

扫一扫