css基础2

html添加样式方法:

1.html 标签上加属性也能修改样式(已过时的方法)。

2.在 html 标签加 style = "css代码" 可以修改样式,称为内联样式。

3.在 html <head> 头文件里面加入<style>标签用css写样式。

4.<link rel = "stylesheet" href="./xxx.CSS">通过link标签来引入外部文件,在外部文件写样式。

5.在通过link标签引入外部 css 的情况下,在引入的css文件内加上 @import(xxx.CSS)也可以引入css样式。

css

浏览器会给a标签默认蓝色添加一个color: -webkit -link; 自生样式会覆盖掉父节点的样式。

直接在父节点修改颜色无效,a标签默认蓝色,可以通过color: inherit;继承父标签节点

设置字体大小

font-size: xxx px 

去除字体样式(下划线之类的)可以在MDN或者调试页面的computed查看所有的取值。

text-decoration: none 

字体加粗

font-weight:bold;

可以通过padding,margin调整标签高宽进行修改元素位置。

padding:5px;
margin:0px;

浮动。类似排序(每个子标签都要添加)

float: Left;

css样式中.classname:hover{}表示鼠标悬停,可以在浏览器调试页面的computed中勾上hover强制悬停。

同一个 div 内部元素高度统一就可以居中

浮动一定会出现bug,需要在父标签引入一个类:

.clearfix::after

{

content:"";

display: block;

clear: both;

}

去掉了列表样式(每行前面的点)

<ul>: list-style:none 

css检查方法:在css里出现奇怪的空白可以在样式里面添加 border: 1px slid red 就可以很容易的找出问题。

css最简单的选择器

当标签有 class="xxx" 属性时,css样式可以通过 .xxx 找到该标签

为了避免重名冲突,可以通过.xxx>nav>ul精确找到要添加样式标签,大于号表示该方法标签的里面对应的标签。

选择器重名可以通过加个范围来控制

选择器:

空格表示选择所有后代元素。针对性更强

“>”选择所有子元素。

在浏览器中styles标签为属性可查看css源码,computed为计算出来的属性(最终的效果)。

Html标签之间不管加多少空格和换行,显示出来的时候都会变成一个空格。

一个标签包裹另外一个标签时,内部标签的大小比外部标签大时,给内部标签添加一个css样式display: block;就可以解决。

其他:

一般body标签会有一个默认的 6 像素的 margn ,可以在开始做项目的时候提前去掉。

可以在浏览器的调试界面点network查看get了哪些文件

操作系统渲染出来的字体颜色不是字体颜色,而且每种字体的颜色都会有区别,

要查看原色可以在调试页面的computed取色,或者直接问设计师

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。