前端之CSS

CSS简介

CSS(层叠样式表：Cascading Style Sheets)，就是给html语言写的前端加样式的，用于美化前端页面。

注释

同前，学习一种语言其注释很重要！
css文件注释格式为/*单行注释*/

/*
多行注释1
多行注释2
多行注释3
*/

语法结构

选择器 {
    属性1:值1;
    属性2:值2;
    属性3:值3;
}

css的美化方式是选择某个标签后针对要美化的属性进行赋值，并以分号结束！

常用属性

常用属性有颜色color、背景色background-color、高度height、宽度width、字体大小font-size等。

前面先涉及这些，后面有深入的更多

引入方式

head内书写
```
<style>
    h1 {color:red;}
</style>
```

link引入外部css文件

<link rel="stylesheet" href="cssStudy.css">

直接在标签内书写
```
<h1 style="color:red;">CSS学习</h1>
```
ps:一般写项目时采用第二种，不建议采用第三种(因为不好检查)，在学习时采用第一种的方式比较方便(以下示例均采用第一种)

选择器

基本选择器

id选择器
用“#+id名”进行选择

#ddd {color:blue;}
/*对id=ddd的标签内容的颜色变为蓝色*/

类选择器
用“.+类名”进行选择

.ccc {color:orange;}
/*对'class=ccc'的标签内容的颜色变为橙色*/

标签选择器
直接选择标签名

p {background-color:red;}
/*对所有p标签将其背景色改为红色*/

通用选择器
用*表示选中所有标签
```
* {color:blue;}
  /*将html页面的所有标签全部变为蓝色*/
```
ps：一般不使用标签选择器和通用选择器，因为范围太大，而一个页面不可能那么简单。

组合选择器

后代选择器
用“空格”，表示选中父标签里任意后代(即嵌一层套或多层套)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div span {color:red;}
    </style>
</head>
<body>
    <div>
        <p>
          <span>孙子层</span>
        </p>
        <span>儿子层</span>
    </div>
</body>
</html>

后代选择器

结果为“儿子层”和“孙子层“都变为了蓝色

儿子选择器
用“>”选择，只选中父标签的儿子层
同后代选择器的例子，若改为div>span {color:red;}则只有“儿子层”变为红色

邻近选择器
用“+”号选择，表示选择标签的紧邻的下一个同级标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css blog</title>
    <style>
        div+p {color:red;}
    </style>
</head>
<body>
    <div>host</div>
    <p>邻居</p>
    <p>
      <span>弟弟</span>
    </p>
</body>
</html>

邻近选择器

结果为“邻居”变为红色

弟弟选择器
用“~”选择，表示选择标签所有下面的同级标签
同邻居选择器例子，若为div~p {color:greenyellow;}则“邻居”和“弟弟”都变为荧光色

属性选择器

属性选择器是用[]来选择的

[username]：表示选择有属性username的标签
[username=‘bob’]：表示选择有属性username且属性值等于bob的标签
input[username=‘bob’]：表示选择有属性username且属性值为’bob’的input标签

/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
  color: green;
}

不怎么常用的属性选择器

伪类选择器

常用于a标签和input标签，比如a标签(链接标签)：当鼠标放上去是不是会换颜色啊

link：初始态，未点击时的状态
hover：鼠标悬浮在上面的状态
active：鼠标点中不放的状态

visited：鼠标点击后的状态

    <style>
        a:link{color:darkgrey;}
        a:hover{color:black;}
        a:active{color:red;}
        a:visited{color:green;}
    </style>
    
    <a href="https://www.jd.com"click me</a>

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css blog</title>
    <style>
        /*设置首字大头*/
        p:first-letter {font-size:32px;}
        /*在文本开头添加内容 但不能选中复制*/
        p:before {content:'python';color:red;}
        /*在文本末尾添加内容 但不能选中复制*/
        p:after {content:'hahaha';color:blue;}
    </style>
</head>
<body>
    <p>人生苦短，我用Python</p>
</body>
</html>

伪元素选择器

选择器优先级

这里只针对id选择器、类选择器、行内选择器、标签选择器四种选择器进行比较。

选择器相同但顺序不同
“就近原则”即离标签越近就用它(越向下的css代码)
选择器不同(匹配精度越高越有效)
行内选择器>id选择器>类选择器>标签选择器

基本属性

字体属性

font-size：字体大小
font-family：字体格式，如Times New Roman
font-weight：bolder为加粗，lighter为细字体，inherit为继承父标签字体粗细
color：字体颜色，有四种书写方法
1. 颜色英文，如red，blue
2. 颜色编号，如#4e4e4e,#eeeeee等
3. rgb(0,0,0) 三基色，数字范围为0~255
4. rgba(0,0,0,0.5) 第四个数字为透明度，范围0~1

透明度

与rgba()不同，opacity同时改变字体和颜色的透明度
如opacity:0.5;

文字属性

text-align：center表示居中，right右对齐，left左对齐，justify两端对齐
text-indent：用于缩近(设置为字体font-size的两倍—指缩近两格)
text-decoration：overline顶头线，underline下划线，line-through删除线，none表示无格式(用来去除a标签的下划线)

边框

border-width：边框厚度，单位px

border-style：边框样式，solid为实现，dotted为圆点，dashed为虚线

除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示

#d1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-color：边框颜色

以上三个支持简写：border:3px dashed blue;
也可单独对上下左右加边框，如border-top：2px solid red；
border-radius:50%;——画圆(在height=width是为圆，不等时为椭圆)

display属性

display：none；隐藏标签内容且占用位置也没了
display：inline；将标签转为行内标签的特点
display：block；将标签转为块级标签的特点
display：inline-block；同时具有块级和行内标签的特点常用来写一行多个标签内容

盒子模型

可以将前端页面看成是装有物品的盒子，盒子与盒子之间有距离(margin)，盒子本身有厚度(border)，盒子里的物品距离盒子有距离(padding)，物品有内容(content)

盒子模型

margin：标签与标签之间的距离(可以通过margin-top，margin-bottom，margin-left，margin-right单独设置标签之间上下左右之间的距离)
有以下书写方式：
1. margin：0；表示上下左右都是0px；
2. margin：10px 20px；上下为10 左右为20
3. margin：10px 20px 30px；上为10 左右为20 下为30
4. margin：10px 20px 30px 40px；上为10 右为20 下为30 左为40(顺时针转)
5. margin：0 auto；上下距为0 左右自动居中
ps: body在每个浏览器都自带margin值，应提前设置为零
padding(同样有上下左右之分)：表示标签内部内容到标签的距离
！书写规律同margin一样

盒子阴影

类似给边框加上阴影显示。格式为：如box-shadow：5px 5px 5px rgba(0,0,0,0.8);

浮动

设置标签浮在页面之上脱离页面，脱离了文档流
如float:right;/float:left;
但会造成父标签塌陷的问题：即已被子标签撑起的父标签，在子标签浮动出页面之后脱离了父标签的怀抱，父标签中就没有内容充起，就会蔫儿了

解决浮动的影响

另加内容充起父标签
clear属性如clear:left;消除左边的浮动

通用公式：

.clearfix {
content:'';
display:block;
clear:both;
}
/*只要哪个标签需要清除浮动的影响，就给它的类属性加一个clearfix值(class='clearfix')*/

溢出

当标签的内容大于标签的大小时就会造成内容溢出到标签外的现象
默认是溢出内容可见的即overflow:visible;

overflow：hidden；溢出内容不显示
overflow：scroll；右侧加上下滚动条查看
overflow：auto；自动依据内容设置上下/水平滚动条

定位

静态(position：static；)默认标签都是静态的即不可改变位置
相对定位(position:relative;)：相对于自己原来标签位置移动

ps：加了relative的标签不管有没有定位，标签性质都变为定位过了
绝对定位(position:absolute;):相对于已经定位过的父标签进行移动(若没有父标签则以body为参照)
固定定位(position:fixed;)：相对于浏览器窗口做定位移动 eg：“回到顶部”

脱离文档流

标签是否脱离文档流指标签原来占用的位置是否还在

不脱离文档流：相对定位
脱离文档流：浮动固定定位绝对定位

z-index模态框

如百度的登录界面：将页面分为三层底层中间黑层最顶层
指z轴离用户的距离相对大小用z-index大小(任意数字)来区分越大表示越在上层

#ddd {
  z-index: 999;  <!-- 数值大的在上，浮动元素不能使用z-index，默认z-index值为0 -->
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
    body{margin:0px}
    #cover {background-color:rgba(0,0,0,0.5);top:0;bottom:0;
            right:0;left:0;position:fixed;
            z-index:99;}
    #modal {background-color:white;position:fixed;
            left:50%;top:50%;width:400px;height:200px;
            margin-left:-200px;margin-top:-100px;
            z-index:100;}
</style>
</head>
<body>
    <div>这是最底层</div>
    <div id="cover"></div>
    <div id="modal">
        <h1>登录界面</h1>
        <p>username:<input></p>
        <p>password:<input></p>
        <button>点我点我~</button>
    </div>
</body>
</html>

模态框

posted @ 2022-10-23 20:28 weer-wmq 阅读(43) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

weer

前端之CSS

CSS简介

注释

语法结构

常用属性

引入方式

选择器

基本选择器

组合选择器

属性选择器

伪类选择器

伪元素选择器

选择器优先级

基本属性

字体属性

透明度

文字属性

边框

display属性

盒子模型

盒子模型

盒子阴影

浮动

浮动

解决浮动的影响

溢出

定位

脱离文档流

z-index模态框

公告