css笔记

最新推荐文章于 2022-06-17 15:56:39 发布

背德典范

最新推荐文章于 2022-06-17 15:56:39 发布

阅读量279

点赞数

本文链接：https://blog.csdn.net/weixin_42488443/article/details/112599357

版权

一、什么是css

cascading style sheet 层叠样式表
css不能脱离html而单独存在

二、语法

1.属性的设置
属性名和属性值之间使用冒号分隔
多对属性之间使用分号分隔
最后一对属性可以不加分号

style

<div style="width:100px;height:100px;background-color:yellow;"></div>

其他（代码块）

            选择器{
                width：100px；
                height：100px；
                background-color：yellow；
            }

2.注释

写法
/* 注释内容 */
作用
增加代码的可读性，便于代码的维护和管理
注意
注释不能嵌套使用

3.速记写法/简写形式
padding-top 上内边距
padding-bottom 下内边距
padding-left 左内边距
padding-right 右内边距

padding:10px;//上下左右均为10px
padding:10px 20px;//上下为10px，左右为20px
padding:10px 20px 30px;//上10px 左右20px 下30px
padding:10px 20px 30px 40px;//顺时针依次对上、右、下、左进行设置

margin外边距同理
margin:0 auto;//设置给具有宽度的块级元素时，元素可以在父级元素中自动居中 上下不设置auto因为一般情况下页面的高度不固定，所以无法让它上下居中

border:1px solid red;
是下文的简写形式：
border-width:
border-style:
border-color:
更可以细化为:
border-top-width:
border-top-style:
border-top-color:

三、如何将css作用在html上

行内样式
写在标签内部的style属性上
内嵌式/内部样式表
在head内部使用style标签设置（代码块）
外部样式表（建议使用）
在当前html文件外部，建立一个css外部文件
.css为文件名后缀
1.link标签写在head内

<head>
<link rel="stylesheet" href="./style.css">
</head>

建议使用link标签，“标签”意味着是html的一部分，所以其优先加载html。所以推荐使用。
2.@import属性写在head内的style标签内部

<head>
  <style>
    @import url('./style.css');
  </style>
</head>

“属性”是css的一部分，所以其优先加载css（此时html还没有加载出来）所以不推荐使用。
你得先有了房子（html）才能进行装修（css）

优先级：行内样式>内嵌式=外部样式（link）

结论：就近原则。哪一个样式距离html元素更近，谁的优先级更高。（因为html从上到下依次解析的特点，距离html元素越近越后被解析，后解析的样式会覆盖先解析的样式）

四、选择器

标签选择器：通过标签名称选择一类元素
div{} span{} p{}
id选择器
通过id属性选择一个元素
#one即id=‘one’
#one{}
类选择器
class：通过class属性选择一类元素
.one即class=‘one’
.one{}
普遍选择器
*{}
选择所有
后代选择器
空格：选择当前元素的所有后代元素（包含孙代）
大于号：选择当前元素的直接子元素
兄弟选择器
+：选择当前元素之后的一个兄弟元素
~：选择当前元素之后的所有兄弟元素
组合选择器（且）
div#one{}:选择div标签内且id为one的元素进行样式设置
div.one p{}:选择div标签内且class为one的元素下的子元素p标签进行样式设置
多选择器（和）
div,p,span,#one,.one{}:对以上所有元素进行样式设置
属性选择器
根据元素的属性选择一类元素
[id]:当前页面具有id属性的元素
[id=‘one’]：具有id属性，属性值为one的
[class=‘one’]:具有class属性，且属性值唯一为one的
[class~=‘one’]：具有class属性，并且属性值之一为one的
[class^=‘o’]：具有class属性，并且属性值以o开头
[class$=‘o’]：具有class属性，并且属性值以o结尾
[class*=‘o’]：具有class属性，并且属性值包含o字符
伪类名称
:first-child（该元素的父元素的第一个子元素）
:last-child(该元素的父元素的最后一个子元素)
:only-child（该元素的父元素只有一个子元素）
:nth-child（num/odd/even）（该元素的父元素的第几个孩子/奇数个孩子/偶数个孩子）
:first-of-type(作为该类型元素的第一个子元素) 即进行两次选择，第一次first意同first-child，第二次type选择在第一次选择基础上的该类型元素的第一个子元素
:last-of-type
a：
:link：未点击状态
:hover：悬停状态
:active：鼠标按下时
:visited：点击之后的状态
若要同时设置四个状态的样式，最好遵循顺序为link→visited→hover→active
伪元素选择器
::伪元素名称
：：first-letter选择第一个字母设置样式
：：first-line选择第一行设置样式
：：before（当前元素内容之前）
content：‘普通文本 ’/url() 图片无法改变大小，因为其为行内元素，不能直接设置宽高
：：after（当前元素内容之后）
：：selection：设置选中后的样式 曾经火狐不支持这个样式，必须在之前加-moz-

五、选择器的优先级问题

!important;//不计入优先级的计算，因为其优先级最高。不过太极端，建议少用。

特性值的计算

特性值越高，优先级越高；
特性值相同，谁更靠近html，谁的优先级越高。

写在style属性内部：1000
id选择器：100
类/伪类/属性选择器：10
标签（元素）/伪元素选择器：1

六、继承

有些属性默认继承父元素，有些默认不继承（比如font属性、文本系列属性、列表系列属性、cursor属性）

属性
inherit设置继承父元素
initial设置不继承父元素
unset不设定，表现该规则本来特性，默认继承就继承，默认不继承就不继承。

七、尺寸+颜色=单位值

尺寸

绝对单位
px
相对单位
百分比
1em约等于1个M的宽度约等于16px

颜色

关键字
red……
rgb（r,g,b）0~255
r：red
g：green
g：blue
rgba（r,g,b,a）
a：透明度0~1
十六进制颜色值
#fff：白色
#ccc：灰色
……

八、文本样式

color 为字体指定颜色
font-size 为文字指定大小
font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体

直接写入电脑系统自带的字体，举例如“宋体”/“黑体”等
每台电脑系统不同，所具备的字体也不同，可能你所写的页面使用的字体在某用户的电脑上无法识别

最低0.47元/天解锁文章

背德典范

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css笔记

一、什么是csscascading style sheet 层叠样式表css不能脱离html而单独存在二、语法1.属性的设置属性名和属性值之间使用冒号分隔多对属性之间使用分号分隔最后一对属性可以不加分号style<div style="width:100px;height:100px;background-color:yellow;"></div>其他（代码块）选择器{ width：100px；
复制链接

扫一扫