CSS
Published on 2022-06-26 20:41 in 分类: Web前端学习 with 深巷の猫
分类: Web前端学习

CSS

一、语法

p{//选择器（设置样式的范围）
    //属性：值;
    font-size:12px;//字号
    color:blue;//字体颜色
    font-weight:bold;//加粗
}
/*注释*/

二、样式添加方法

1.行内样式

<p style="color:red">//设置style属性
    
</p>

2.内嵌样式

head标签内设置style标签

只对当前页面有效

<head>
    <style type="text/css">
        p{
            color:red;
        }
    </style>
</head>

3.链接样式

链接css文件

<head>
    <link rel="stylesheet" href="路径" />
</head>

4.优先级

  • 多重样式可以层叠，可以覆盖
  • 样式的优先级按照“就近原则”
  • 行内样式>内嵌样式>链接样式>浏览器默认样式

三、选择器

1.标签选择器

选择器的名字为标签的名字

h1{
    font:"黑体";
    font-size:12px;
}

2.类选择器

p{font-size:12px;}
.one{font-size:18px;}
.two{font-size:24px;}

样式的引用：设置class属性

<p class="one">
    类别1
</p>
<p class="two">
    类别2
</p>
<p>
    普通段落
</p>

3.ID选择器

#one{font-size:12px;}
#two{font-size:24px;}

样式的引用：设置id属性

<p id="one">
    文字1
</p>
<p id="two">
    文字2
</p>

4.层次选择器

4.1后代选择器

p span{
    color:red;
}

4.2子选择器

p>span{
    color:red;
}

4.3相邻兄弟选择器

/*向下，一个*/
p+pan{
    color:red;
}

4.4通用兄弟选择器

/*向下，所有*/
p~pan{
    color:red;
}

5.结构伪类选择器

/*ul的第一个子元素*/
ul li:first-child{}
/*ul的最后一个子元素*/
ul li:last-child{}
/*选择当前p元素的父级元素，选中父级元素的第一个元素，并且是p元素才生效*/
p:nth-child(1){}
/*选择当前p元素的父级元素，选中父级元素的第二个p元素*/
p:nth-of-type(2){}

6.属性选择器

/*标签[属性：值]{}   属性可以使用正则表达式
=  绝对等于
*=  含等于
^=   以这个开头
$=   以这个结尾
*/
a[id]{}
a[id="a"]{}
a[class*="a"]{}

7.声明方式

/*集体声明*/
h1,p{text-align:center;}
/*全局声明*/
*{text-align:center;}

8.混合

//多个class选择器混用，用空格分开
<div class="one two"></div>
 
//id和class混用
<div id="my" class="one"></div>

id选择器不可以多个同时使用

四、样式

1.文字

1.1单位与颜色

单位 颜色
px：像素 red，blue，green：颜色名
em：字符（自动适应用户字体） rgb(x,x,x)：RGB值
%：百分比 rgb(x%,x%,x%)：RGB百分比值
rgba(x,x,x,x)：RGB值，透明值
#rrggbb：十六进制数

1.2文本属性

属性 描述 取值
color 文本颜色 red，rgb(x,x,x)···
letter-spacing 字符间距 px,em
line-height 行高 px,em,%
text-align 对齐 center,left,right,justify
text-decoration 装饰线 none,overline,underline,line-through
text-indent 首行缩进 em
text-shadow 阴影 text-shadow:x偏移，y偏移，颜色

1.3字体属性

属性 描述 取值
font 设置所有字体属性 font:斜体 粗体 字号/行高 字体
font-family 字体系列 font-family:"Microsoft YaHei",sans-serif;（依照顺序找到字体，有空格时需要加双引号）
font-size 字号 px,pt,%
font-style 斜体 italic
font-weight 粗体 bold

2.背景

背景图片会覆盖背景颜色

属性 描述 取值
background 设置所有字体属性 background:颜色 图片 repeat
background-color 背景颜色 reg,rgb(x,x,x)···
background-image 背景图片 url("路径")
background-repeat 背景图片的填充方式 repeat,repeat-x,repeat-y,no-repeat

3.超链接

超链接的状态，:伪类选择器

状态 描述
a:link 普通的、未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方悬停
a:active 链接被点击的时刻

设置的顺序：a:link,a:visted>a:hover>a:active

a:link{
    text-decoration:none;
    color:#09f;
}
a:visited{
    text-decoration:none;
    color:#930;
}
a:hover{
    text-decoration:underline;
    color:#03c;
}
a:active{
    text-decoration:none;
    color:#03c;
}

4.列表

属性 描述 取值
list-style 设置所有列表属性
list-style-image 为列表项标志设置图像 url("路径")
list-style-position 标志的位置 inside,outside
list-style-type 标志的类型
list-style-type属性值 描述
none 无标记
disc 实心圆（默认）
circle 空心圆
square 实心方块
decimal 数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
lower-Greek 小写希腊字母
lower-latin 小写拉丁字母
upper-latin 大写拉丁字母

5.表格

属性 描述 取值
width 宽 px
height 高 px
border 边框 border:1px solid #eee（宽度 实线/虚线 颜色）
border-collapse 表格重叠 collapse

奇偶选择器

隔行显示不同的颜色

标签:nth-child(数字/odd/even){//数字：第几行、odd：奇数、even：偶数
    
}

五、布局与定位

1.盒子模型

属性 描述 取值
content 内容
height 高度 px
width 宽度 px
padding 内边距（-top、-bottom、-left、-right） px,%（外层盒子的值）
border 边框（-top、-bottom、-left、-right） px,%
margin 外边距（-top、-bottom、-left、-right） px,%（外层盒子的值）、
overflow属性（内容溢出的处理）值 描述
hidden 超出部分不可见
scroll 显示滚动条
auto 如果有超出部分，显示滚动条
border属性 描述 取值
border 设置所有边框属性 宽度 样式 颜色
border-width 边框宽度 px,thin,medium,thick
border-style 边框样式 dashed（虚线）、dotted（点）、solid（实线）、double（双实线）
border-color 边框颜色 red，rgb(x,x,x)···

水平分割线

.line{
    height:1px;
    width:500px;
    border-top:1px solid #e5e5e5;
}

padding、margin属性：px,%（外层盒子的值）

margin属性：margin:px,px,px,px（上、右、下、左；省略时：上=下，右=左）

margin属性的合并：外边距合并成一个（取较大者）、垂直方向合并，水平方向不合并

水平居中：margin:任意值 auto；

2.定位机制

2.1文档流flow（默认）

从左到右，从上到下

元素分类 特点 常见元素
block 独占一行、元素的height、width、margin、padding都可设置 div、p、h1...h6、ol、ul、table、form
inline 不单独占用一行、width、height不可设置、有间隙问题 span、a
inline-block 不单独占一行、height、width、margin、padding都可设置 img

属性display：设置显示的属性

a{
    display:block;
}

2.2浮动定位float

float属性（设置浮动） 描述
left 左浮动
right 右浮动
none 不浮动
clear属性（清除浮动） 描述
both 清除左右两边的浮动
left/right 只能清除一个方向的浮动
none 默认值

父级元素边框塌陷问题

  1. 增加父级元素的高度

  2. 增加一个空的div标签，清除浮动

  3. overflow，在父级元素中增加overflow：hidden

  4. 在父类中添加一个伪类：after（推荐）

    		#father:after{
    		    content:'';
    		    display:block;
    		    clear:both;
    		}

2.3层定位layer

position属性 描述
static 没有定位（默认值）
fixed 固定定位（相对于浏览器窗口）
relative 相对定位（相对于直接父元素）、其在文档流中的原位置依然存在
absolute 绝对定位（相对于static以外的第一个父元素（最近定义的relative或者absolute），找不到则相对于body）、其在文档流中的原位置不再存在

z-index属性：大的在上层

opacity属性：透明度

六、CSS3

w3c制定标准慢，浏览器厂商快速加入新属性的支持，加前缀

w3c确定标准后，全面支持，去掉前缀

浏览器内核 浏览器 CSS3前缀
Webkit Safari、Chrome -webkit-
Gecko Firefox -moz-
Presto Opera -o-
Trident IE -ms-

1.圆角边框

border-radius属性 描述
border-top-left-radius：水平值 垂直值 左上角形状
border-top-right-radius：水平值 垂直值 右上角形状
border-bottom-left-radius：水平值 垂直值 左下角形状
border-bottom-right-radius：水平值 垂直值 右下角形状

2.阴影

box-shadow属性 描述
inset 内部阴影
outset 外部阴影（默认）

box-shadow:inset /outset（默认）水平偏移 垂直偏移 模糊距离 颜色

3.文字与文本

3.1文本阴影

text-shadow:水平偏移 垂直偏移 阴影大小 颜色

3.2长文本

允许长单词、URL强制进行换行

word-wrap：normal/break-word

3.3@font-face规则

利用@font-face规则，定义web字体，并引用

需要字体的四种文件格式，确保能在主流浏览器中都能正常显示改字体

字体文字后缀 适用于浏览器
.TTF或.OTF Firefox、Safari、Opera
.EOT Internet Explorer 4.0+
.SVG Chrome、IPhone
.WOFF Chrome、Firefox 
<style>
    @font-face{
        font-family:字体名字;
        src:url("路径1"),
            url("路径2"),
            url("路径3"),
            url("路径4");
    }
    P{
        font-family:字体名字;
    }
</style>

4.2D变换

transform属性

  • 旋转：transform:rotate(度数deg);（顺时针）
  • 缩放：transform:scale(x,y);（x,y：水平，垂直方向的缩放倍数）

5.过渡与动画

5.1过渡

transition属性：将元素的某个属性从“一个值”，在指定的时间内过渡到“另一个值”

transition属性 描述
transition 属性名 持续时间 过渡方法
transition-property 属性名/all（对哪个元素进行变换）
transition-duration 持续时间
transition-timing-function 过渡使用的方法
transition-delay 过渡效果何时开始
transition-timing-function值 描述
linear 匀速
ease 慢快慢
ease-in 慢快
ease-out 快慢
ease-in-out 慢快慢

5.2动画

  • 定义动画：@keyframes规则

    		@keyframes mycolor(动画名字)
    		{
    		    0%(关键帧的名字) {background-color：red;}
    		    30% {background-color：blue;}
    		    60% {background-color：yellow;}
    		    100% {background-color：green;}
    		}

  • 调用动画：animation属性

    		div:hover{
    			animation:mycolor(动画名字) 持续时间 过渡方法
    		}
    animation属性值 描述
    animation 动画名 持续时间 过渡方法
    animation-name 引用@keyframes动画的名称
    animation-duration 动画完成的时间
    animation-timing-function 规定动画的速度曲线（默认“ease”）
    animation-play-state running/paused（动画的播放状态）

6.3D变换

设置transform-style：preserve-3d；

  • 旋转：transform属性

    • rotateX(度数deg)
    • rotateY(度数deg)
    • rotateZ(度数deg)

  • 透视：perspective属性

    • 像素值（越小，离舞台越近）
posted @   深巷の猫  阅读(16)  评论(0)  编辑  收藏  举报
相关博文：
·  JavaWeb
·  SpringMVC
·  WEB前端开发--3（CSS样式）
·  前端(二)-CSS
·  CSS笔记
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
← → ↓ ↑
点击右上角即可分享
微信分享提示
AI IDE Trae