CSS菜鸟入门

最新推荐文章于 2023-05-10 15:23:50 发布

one happy boy

最新推荐文章于 2023-05-10 15:23:50 发布

阅读量387

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/Thousandscity/article/details/108942404

版权

内联样式

也称行内或行间样式，是通过在html标签上添加style属性来实现的

内部样式

在<style></style>中进行样式添加，内部样式可以复用，符合W3C标准

外部样式

<link rel="stylesheet" href="">
- rel:指定资源跟页面的关系
- href:资源的地址
@import url(./common.css);
- 问题较多不建议使用

颜色表示法

单词表示法(white,black等等)
十六进制表示法(#000,#fff等)
RGB表示法（0-255）（如(255,0,0)等）

背景样式

background-color：背景颜色
background-image：背景图片（URL背景地址，默认水平垂直都铺满背景图）
background-repeat：背景图片的平铺方式（repeat-x、repeat-y、repeat、no-repeat）
background-positon：背景图片位置（x y）=>（数字[px/%] | 单词[x:left/center/right],[y:top/center/bottom]）
background-attachment：背景图随滚动条的移动方式（scroll默认值，背景位置是按当前元素进行偏移的；fixed位置是按照浏览器进行偏移的）
background:red url() repeat 0 0;（颜色背景图平铺方式位置）

边框样式

border-style：边框样式（solid实线、dashed虚线、dotted点线…）
border-width：边框大小（px）
border-color:边框颜色
可使用(border-top/right/bottom/left)单独对一个边框进行设置
border:1px solid black;（边框大小样式颜色）对单个边也可以用

实际案例：利用css边框实现三角形

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div {
        width: 0px;
        height: 0px;
        border-top-color: transparent;
        border-top-style: solid;
        border-top-width: 30px;
        border-right-color: red;
        border-right-style: solid;
        border-right-width: 30px;
        border-bottom-color: transparent;
        border-bottom-style: solid;
        border-bottom-width: 30px;
        border-left-color: transparent;
        border-left-style: solid;
        border-left-width: 30px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

关于文字样式

font-family:字体类型

设置多字体方式可以使其能够适应更多的计算机和设备
引号问题:有的字体中间有空格，必须用引号引起来

font-size:字体大小，默认16px，一般为偶数字号

属性取值	字体大小
xx-small	最小
x-small	较小
small	小
medium	正常（默认）
large	大
x-large	较大
xx-large	最大

font-weight:字体粗细，normal正常，bold加粗；数字100-500正常，600-900加粗
font-style:字体样式,normal正常,italic斜体但仅限于带有倾斜字体的可以设置，oblique也是设置倾斜，与italic不同的是任何字体都可以设置倾斜
color:字体颜色分为以下几种

单词表示法(white,black等等)
十六进制表示法(#000,#fff等)
RGB表示法（0-255）（如(255,0,0)等）

复杂样式:font:weight style size family、font:style weight size family、font:weight style size/line-height family

段落样式

text-decoration:文本修饰（underline下划线、line-through删除线、overline上划线、none不添加任何修饰），可添加多个修饰，修饰之间需用空格隔开
text-transform：文本大小写（针对英文段落，lowercase小写、uppercase大写、capitalize首字母大写）
text-indent：文本缩进（首行缩进font-size的两倍，或2em[em为相对单位，永远跟一个字体设置的大小相同）
text-align：文本对齐方式（left默认、right、center）
line-height：定义行高（不为固定值，根据当前字体的大小变化，用数字+px表示）
letter-spacing：定义字间距
word-spacing：定义词间距（针对英文）

选择器

ID选择器

css:#elem{}
html:id=“elem”
【注】1.在一个页面中，ID值是唯一的
2.命名规范，字母 _ - 数字 （命名的第一位不能是数字）
3.命名方式：驼峰式（小驼峰、大驼峰）、下划线式、短线式

CLASS选择器

css:elem{}
html:class=“elem”
【注】1.class选择器是可以复用的
2.可以添加多个class样式
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
4.标签+类的写法

标签选择器

css:div{}
html:<div></div>

分组选择器

css:div,p,span{}

层次选择器

后代：M N{}
父子:M > N{}
兄弟：M ~ N{} 当前M下面的所有兄弟N标签
相邻：M + N{} 当前M相邻的N标签

属性选择器

div[class]{}
div[class][id]{}
div[class=box]{}
div[class*=search]{} //只要search在class中出现过都可以选中

伪类选择器

css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
:link 访问前的样式（只能给a标签）
:visited 访问后的样式（只能给a标签）
:hover 鼠标移入时的样式（可以给所有标签）
:active 鼠标按下时的样式（可以给所有标签）
如果四个伪类都生效，顺序为：l v h a

伪元素选择器

div:after{content: ;color: }
div:before{content: }
:checked、:disabled、:focus 都是针对表单元素

结构性伪类选择器
:nth-of-type(){}、:nth-child(){} 角标从1开始，n值表示从0到无穷大即都被选中，隔行换色（2n）(2n+1)
选中第一项 :first-of-type{} :first-child{}
选中最后一项 :last-of-type{} :last-chile{}
只有一项的时候被选中 only-of-type{}
type和child的区别：type看子类别，child不区别子类别

样式继承

文字相关样式可以被继承，布局相关的样式默认不继承，可食用inherit值让其继承

优先级

相同样式优先级：后边优先级较高
内部样式与外部样式：优先级相同，如果设置了相同样式，后写的引入方式优先级高
单一样式优先级：style行间(权重1000)>id(权重100)>class(权重10)>tag(权重1)>继承
!important不能针对继承的属性进行优先级的提升
标签+类与单类：标签+类>单类
群组优先级：与单一选择器优先级相同，后写的优先级高
层次优先级：权重比较

盒子模型

在这里插入图片描述

padding/border/margin
只写一个值：上右下左
写两个值：上下、左右
写三个值：上、左右、下
写四个值：上、右、下、左
1.背景颜色会填充到margin以内的区域（不包括margin区域）
2.文字会在content区域
3.padding不会出现负值，margin是可以出现负值的
box-sizing（盒尺寸，可以改变盒子模型的展示形态）[content-box]/[border-box]
使用场景：1.不用再去计算一些值
2.解决一些百分比的问题input{width:100%;padding:30px;box-sizing:border-box;}
margin合并
当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题（取两者中大的值作为叠加值），只有上下有，左右没有
解决方案：
1.BFC规范
2.想办法只给一个元素添加间距
margin塌陷
传递问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向没有传递问题
解决方案：
1.BFC规范
2.给父容器加边框
3.margin换成padding（加给父元素，padding-top: ;并进行调整）
margin自适应居中（只可以左右，不可以上下）
margin-left:auto;margin-right:auto;居中
一般写法：margin：0 auto;(margin:auto auto;)

浮动

默认没有浮动可以设置左右浮动

float-left;左浮动
float-right;右浮动

标签分类

布局用块标签，修饰文本用行内标签

按类型：
block：块 div p ul li h1…独占一行；支持css中所有的样式；不写宽时，和父元素宽相同；所占区域是一个矩形
inline：行内 span a em strong img…挨在一起；有些样式不支持（宽、高、margin、padding的某些）；不写宽时，宽度由内容决定；所占区域不一定是矩形；行内标签之间会有空隙（换行产生），解决，找到两个行内的父元素：font-size:0;然后两个行内在设置font-size;16px;空隙消失
inline-block：行内块 input select…挨在一起，支持设置宽高

显示框类型

display:block/inline/inline-block/none（让指定标签隐藏）
disp:none不占空间的隐藏；visibility:hidden占空间的隐藏

标签嵌套规范

块标签可以嵌套行内标签，不一定能嵌套块标签
行内标签不能嵌套块标签

溢出隐藏

overflow:visible（默认）/ hidden / scroll（有滚动条）/ auto（内容多的时候有滚动，内容少的时候没有）
overflow-x、overflow-y:针对x、y分别设置

透明度与手势

opacity
0（透明）~ 1（不透明）0.5
rgba( , , ,0.5) 最后一个为透明度，只针对背景，不针对文字，可以让指定样式透明，不改变其他样式
cursor 手势
default：默认透明
自定义鼠标样式：pointer（手型）、move（十字米可移动的样式）、help（箭头带问号）
自定义，准备图片 .cur .ico的才可以，`cursor:url(),auto;

最大最小宽高设置

min-width、max-width
min-height、max-height

让一个容器适应屏幕的高度的方式：

html,body{height:100%}
.contrainer(height:100%}

默认样式

div、span...没有默认样式
body(margin:8px)、h1(margin:上下16px)-h6、p、ul(margin:上下16px padding:左40px 默认点:list-style:disc)、a(text-decoration:underline)…有默认样式

重置样式

*{margin:0;padding:0;}
ul{list-style:none;}
a{text-decoration:none;color:#666;}
img{display:block;}

图片与容器底有空隙
vertical-aglin:bottom;底线对齐
display:block;最简单的方式

one happy boy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS菜鸟入门

目录内联样式内部样式外部样式颜色表示法背景样式边框样式关于文字样式段落样式选择器样式继承优先级盒子模型![在这里插入图片描述](https://img-blog.csdnimg.cn/20201006195308779.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Rob3VzYW5kc2NpdHk=,size_16,color_FFFFFF,t_
复制链接

扫一扫