【前端】CSS

定义:层叠样式表 Cascading Style Sheets,控制页面的展示效果

1.基本语法规范

选择器 + 1/n条声明

  • 选择器决定针对谁修改
  • 声明决定修改啥
  • 声明的属性是键值对,使用 ; 区分键值对,使用 : 区分键和值

2.格式

style标签可放在head标签(通常)或body标签中,也可放在两标签之间

<style>
    p {
         color: red;
         font-size: 40px;
    }
</style>

3.引入方式

内部样式表

通过style标签将css嵌套到html页面中,上方格式中的代码就采用这种方式

优点:让样式和页面结构分离

缺点:分离的不够彻底,尤其是css内容多的时候

行内样式表

<h1 style="color: blue; font-size: 20pxc;">你好</h1>

行内样式表优先级高于内部样式表

外部样式表

创建一个.css文件,在head标签中使用link标签引入css

<link rel="stylesheet" href="/demo.css">

4.选择器

4.1基础选择器

1> 标签选择器:格式中的代码即是标签选择器

2> 类选择器:差异化表示不同的标签,多个类名用于样式叠加

<p class="eat food">吃饭</p>
<p class="sleep">睡觉</p>
.eat {   ……
       }
.food {  ……
         }
.sleep {  ……
           }

3> id选择器:#开头

<p id="fe">前端开发</p>
<p id="server">后端开发</p>
#fe {  ……
    }
#server{  ……
       }

4> 通配符选择器:使用 * 选取所有标签,在实际应用开发中用来针对页面中所有元素默认样式进行消除,主要用来消除边距

* {
     color:red;
  }

4.2复合选择器

1> 后代选择器:又叫包含选择器,选择某个父元素中的某个子元素

ol li {
    color: red;
      }
<ul>
    <li>吃饭</li>
    <li>睡觉</li>
</ul>

<ol>
    <li>吃饭</li>
    <li>睡觉</li>
</ol>

2> 伪类选择器:定义元素状态

  • a:link:选择未被访问过的链接
  • a:visited:选择已被访问过的链接
  • a:hover:选择鼠标指针悬停上的链接
  • a:active:选择活动链接(鼠标按下了但未弹起)
a {
    color:black;
  }
a:hover {
    color:red;
  }
a:active {
    color:green;
  }

input {
    color:blue;
  }
input:hover {
    color:black;
  }
input:active {
    color:red;
  }
<a herf="#">不跳转</a>
<br>
<input type="button" value="按钮">

5.常用元素属性

5.1字体属性

外观:多个字体用逗号分隔,从左到右查找字体,找不到则使用默认字体

<!--style在head标签中-->
<style>
    div {
        font-family: 'Microsoft YaHei';
        font-size: 60px;
    }
</style>

<body>
    <div>微软雅黑</div>
</body>

颜色:三种表示方法,单词、十六进制形式、RGB方式

<style>
    div {
        color:red;
        color:#ff0000;
        color:rgb(255,0,0);
    }
</style>

<body>
    <div>红色</div>
</body>

粗细:normal (默认 400)、bold (粗体 700)、bolder (更粗)、lighter (更细)、inherit (继承父元素)

<style>
    div { 
        font-weight: bolder;
        font-weight: 300;
    }
</style>

<body>
    <div>粗体</div>
</body>

样式:normal (默认)、italic (斜体)、oblique (倾斜)、inherit (继承父元素)

<style>
    div { 
        /* 设置倾斜 */
        font-style: italic;
        /* 取消倾斜 */
        font-style: normal;
    }
</style>

<body>
    <div>倾斜</div>
</body>

5.2文本属性

位置:left、center、right

<style>
    h1 {
        text-align: left;
    }
    h2 {
        text-align: center;
    }
    h3 {
        text-align: right;
    }
</style>

<body>
    <h1>靠左</h1>
    <h2>居中</h2>
    <h3>靠右</h3>
</body>

缩进:单位使用 px 或 em,一个 em 就是当前元素的文字大小;缩进可以是负的,表示向左缩进

* lorem:生成长文字 

<style>
    div {
        text-indent: 20px;
    }
    p {
        text-indent: -2em;
    }
</style>

<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quas a***usamus unde ut vel aliquid similique quaerat obcaecati mollitia quis eaque neque veritatis temporibus, porro modi debitis molestias! Consectetur, obcaecati.</div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quas a***usamus unde ut vel aliquid similique quaerat obcaecati mollitia quis eaque neque veritatis temporibus, porro modi debitis molestias! Consectetur, obcaecati.</p>
</body>

装饰: underline (下划线)、overline (上划线)、line-through (删除线)、none (啥都没有,可给a标签去掉下划线)

<style>
    div {
        text-decoration: underline;
    }
    p {
        text-decoration: line-through;
    }
    a {
        text-decoration: none;
    }
</style>

<body>
    <div>hello world</div>
    <p>delete</p>
    <a href="#">不跳转</a>
</body>

行间距:上下文本行之间的基线距离

基准线:顶线、中线、基线、底线

<style>
    p {
    line-height:40px;
    }
</style>

<body>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio perspiciatis deleniti, sit doloribus quia perferendis eaque nobis. Optio quos te***ur suscipit in expedita at odio architecto, libero illum quo error!Lorem</p>
</body>

5.3背景属性

颜色:同字体

<style>
    div {
        background-color: aqua;
    }
    p {
        /* 背景透明 */
        background-color: transparent;
    }
</style>

图片: URL可以加引号也可不加

<style>
    div {
        background-image: url(abc.jpg);
        height: 300px;
    }
</style>

平铺:repeat (平铺 默认)、no-repeat (不平铺)、repeat-x (水平平铺)、repeat-y (垂直平铺)

<style>
    div {
        background-image: url(rose.jpg);
        background-repeat: repeat-x;
    }
</style>

位置:相当于坐标轴 (x, y)

  • 方位名词:(top,left,right,bottom)
  • 精确单位:坐标或百分比(以左上角为原点)
  • 混合单位:同时包含方位名词和精确单位
<style>
    div {
        background-image: url(flower.jpg);
        background-position: top;
        background-position: 200px,200px;   
        background-position: 100px,center;
    }
</style>

尺寸: 

  • 具体尺寸:20px 30px,表示(宽度 高度)
  • 百分比:按照父元素尺寸设计
  • cover:使背景图像完全覆盖背景区域
  • contain:覆盖并使图像宽度高度完全适应内容区域
<style>
    div {
        background-image: url(tree.jpg);
        background-size: 300px 400px;
        background-size: contain;
    }
</style>

5.4文本框属性

使边框带圆角效果,length是内切圆的半径,数值越大,弧线越强烈

  • 圆形:使length的值为正方形边长的一半
  • 圆角矩形::使length的值为矩形高度的一半
<style>
    div {
        width: 200px;
        height: 200px;
        border: 2px green solid;
        border-radius: 50%;
    }
</style>

还可以对四个角分别设置:

<style>
    div {
        border-top-left-radius: 2em;
        border-top-right-radius: 2em;
        border-bottom-left-radius: 2em;
        border-bottom-left-radius: 2em;
        <!-- 顺时针 -->
        /* border-radius: 10px 20px 30px 40px; */
    }
</style>

6.元素的显示模式

6.1块级元素 

h1-h6  p  div  ul  ol ……

6.2行内元素

a img ……

我们要做到是将行内元素与块级元素之间的转换:

  • display:block 改成块级元素
  • display:inline 改成行内元素
  • display:inline-block 改成行内块元素
<style>
    a {
        /* 使两个a标签分别占用一行 */
        display: block; 
    }
</style>

<body>
    <a href="#">链接1</a>
    <a href="#">链接2</a>
</body>

7.盒模型

每一个Html元素相当于一个矩形的盒子

构成:边框border,内容content,内边距padding,外边距margin

7.1边框

  • 粗细:border-width
  • 样式:border-style  默认无边框,solid (实线),dashed (虚线),dotted (点线)
  • 颜色:border-color

层叠性依据就近原则

<style>
    div {
        width: 200px;
        height: 100px;
        border-width: 10px;
        border-style: solid;
        border-color: green;
        /* 支持混写,没有顺序要求 */
        border: 2px dotted red;
        /* 可改变四个方向的边框 */
        border-top: 3px;
        border-left: 4px;
    }
</style>

浏览器默认边框会撑大“盒子”,可使用box-sizing修改浏览器的行为

* {
        box-sizing: border-box;
    }

7.2内边距

默认内容是顶着边框放置的,使用padding可控制这个距离

可给四个方向上都加上边距:padding-top/bottom/left/right

<style>
    div {
        width: 200px;
        height: 100px;
        padding-left: 5px;
        padding-bottom: 3px;
        /* 混合写法 */
        padding: 5px; /*四个方向都是5px*/
        padding: 5px 10px; /*上下内边距5px,左右内边距10px*/
        padding: 2px 5px 10px; /*上内边距2px,左右内边距5px,下内边距10px*/
        padding: 2px 5px 10px 20px; /*上右下左 顺时针*/
    }
</style>

7.3外边距

控制盒子和盒子之间的距离

可给四个方向上都加上边距:margin-top/bottom/left/right

<style>
    div {
        border: solid 10px red;
        margin-top: 2px;
        margin-bottom: 2px;
        /*混合写法同内边距padding*/

        /*块级元素水平居中*/
        margin: auto;
        margin-right: auto;
        margin-left: auto;
    }
</style>

8.弹性布局

flex item,可以纵向排列,也可横向排列,称为flex direction (主轴)

  • justify-content:设置主轴上的子元素排列方式 。start (居左 默认)、end (居右)、center (居                                 中)、space-between (均匀分布)
  • align-items:设置侧轴上的子元素排列方式。start (居上 默认)、end (居下)、center (居                                       中)、space-between (均匀分布)
<style>
    div {
        height: 300px;
        width: 400px;
        background-color: green;
        display: flex; /*弹性布局*/
        justify-content: center; /*主轴*/
        align-items: end; /*侧轴*/
    }
    div span {
        height: 100px;
        width: 100px;
        background-color: red;
    }
</style>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
转载请说明出处内容投诉
CSS教程_站长资源网 » 【前端】CSS

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买