前端三剑客——css 学习笔记

CSS技术简单的阐述

笔记是为了方便复习回顾用
笔记来源是b站尚硅谷讲解的javaweb教程

1、介绍

css是层叠样式表单。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。


2、语法规则

前端三剑客——css 学习笔记_第1张图片

  • 选择器:浏览器根据“选择器”决定受css样式影响的HTML元素(标签)
  • 属性(property)是你要改变的样式名,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration)例如P{color:blue}
  • 多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开。虽然最后一条声明的末尾可以不加分号(但尽量在每条声明的末尾都加上分号)
p{
	color:blue;
	font-size:30px;
}

  • 注:一般每行只描述一个属性
  • css的注释:/* 注释内容 */

3.css与html的结合方式

3.1第一种

在标签的style属性上设置“key:value value;”修改标签样式

  • 出题:分别定义两个div,span标签,分别修改每个div和span标签的样式为:边框一个像素,实线,红色。
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>labeltitle>
head>
<body>
    <div style="border:red solid 1px">早上好div>
    <div style="border:red solid 1px">早起的鸟儿有虫吃div>
    <span style="border:red solid 1px">biubiubiuspan>
    <span style="border:red solid 1px">好看的皮囊千篇一律,有趣的灵魂万中无一span>
body>
html>

实现:

在这里插入图片描述

  • 由此也可以看出div和span标签的特性,div标签独占一行,span标签的长度和标签内文本的长度一样

    这种方法的缺点:

    1)如果标签多了。样式多了。代码量非常庞大

    2)可读性非常差

    3)css代码没有什么可复用性可言

3.2第二种

在head标签中,使用style标签来定义各种自己需要的css样式。

格式如下:

xxx{
	key: value value
}

使用这种方式的代码,实现第一种方法中的题目

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>headtitle>
  <style>
          div{
            border:1px red solid;
          }
          span{
            border:1px red solid;
          }
  style>
head>
<body>
      <div>aaaaaadiv>
      <div>bbbbbbdiv>
      <span>vvvvvvspan>
      <span>ccccccspan>
body>
html>

实验结果和1,一摸一样

  • 这种方式存在的缺点:
    • 只能在同一个页面内复用代码,不能再多个页面中复用css代码
    • 维护起来不方便,实际的项目中会有成千上万的页面,要到每个页面中去修改。工作量就太大了

3.3第三种

把css样式写成一个单独的css文件,再通过link标签引入即可复用。

使用html的< link rel=“stylesheet” type=“text/css” href="./sytles.css"/>标签,导入css样式文件。

css样式文件

div{
    border:1px red solid;
}
span {
    border:1px red solid;
}

html代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <link href="./Demo03Style.css" rel="stylesheet" type="text/css"/>

head>
<body>
        <div>biubiubiudiv>
        <div>dudududududiv>
        <span>bengbengspan>
        <span>huahuahuaspan>
body>
html>

4.css选择器

4.1标签名选择器

格式

标签名{
	属性:;
}

标签名选择器,可以决定哪些标签被动的使用这个样式。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签名选择器title>
    <style>
          div{
            border:red 1px solid;
            color:yellow;
            font-size:30px;
          }
          span{
            border:blue 5px dashed;
            color:green;
            font-size:30px;
          }
    style>
head>
<body>
      <div>我占单独一行div>
      <span>我好困阿span>
      <span>要睡着了,打起精神来啊!span>
body>
html>

实现截图:

前端三剑客——css 学习笔记_第2张图片

4.2id选择器

id选择器的格式是

#id编号{	属性:值;}注:'{'前面的格式是“# + id +编号"编号就是1,2,34之类的

id选择器,可以让我们通过id属性选择性的去使用这个样式。

代码实例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IDSelectortitle>
    <style>
        #id1{
          color:gray;
          font-size:20px;
          border: 8px blue dashed;
        }
        #id2{
          color:gold;
          font-size:30px;
          border:5px fuchsia solid;
        }
    style>
head>
<body>
      <div id="id1">好好学习啊!优秀的人那么多,不学习以后怎么办啊!div>
      <span id="id2">加油,努力呀!span>
body>
html>

前端三剑客——css 学习笔记_第3张图片

4.3 class选择器(类型选择器)

class类型选择器的格式是

class类型{	属性:值;}

class类型选择器,可以通过class属性有效的去使用这个样式

写一个具体实例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class类型选择器title>
    <style>
      .first{
        color:royalblue;
        font-size:20px;
        border:3px yellowgreen solid;
      }
      .class1{
        color:brown;
        font-size:30px;
        border:4px aqua dashed;
      }
    style>
head>
<body>
    <div class="first">样式选择器是 ”. + 类型名称“div>
    <p class="class1" align="center">没想到吧p>
body>
html>

实现截图:

在这里插入图片描述

4.4组合选择器

组合选择器的格式似是:

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

实例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器title>
    <style>
      .class1,#id01{
        color:darkorange;
        font-size:20px;
        border:3px blue solid;
      }
    style>
head>
<body>
    <div id="id01">idea专业版好用,但是我一直嫖好麻烦div>
    <span class="class1">啊!我还好多作业啊!但是一点也不想做,好麻烦啊!span>

body>
html>

4.5css常用样式:

1、字体颜色颜色

  • color:red;

2、宽度

  • width:19px;
  • 宽度可以写像素值:19px
  • 也可以写百分比值:20%

3.高度

  • height:20px;
  • 和宽度一样也是可以写像素值和百分比

4、字体样式

  • color:#FF0000:字体颜色为红色
  • font-size:20px; 字体大侠

5、红色1像素实线边框

  • border:1px solid red;
  • 虚线是dashed

6、DIV居中

  • margin-left:auto
  • margin-right:auto

7、背景颜色

  • backgroud-color:yellow;

8、文本居中

  • text-align:center;

9、超链接去下划线

  • text-decoration:none;

10、表格细线

table{
	border:1px solid black;/*设置边框*/
	border-collapse:collapse;/*将边框合并*/
}
td,th{
	border-collapse:collapse;/*将边框合并*/
}

11、列表除去修饰

ul{	list-style:none;}

对以上所有的样式做一个编写:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他常用样式title>
    <style>
        div{
            color:blue;
            border:1px green solid;
            width:300px;
            height:300px;
            background:gold;
            font-size:40px;
            margin-left:auto;
            margin-right:auto;
            text-align:center;
        }
        a{
            text-decoration:none;
        }
        table{
            border:1px orange solid;
            border-collapse:collapse;
        }
        td{
            border:1px orange solid;
        }
        ul{
            list-style:none;
        }
    style>
head>
<body>
    <a href="https://www.baidu.com">baidua>
    <div>哈哈哈哈div>
    <ul>
        <li>hahahali>
        <li>hahahali>
        <li>hahahali>
        <li>hahahali>
        <li>hahahali>
    ul>
    <table >
        <tr>
            <td>1td>
            <td>2td>
        tr>
        <tr>
            <td>3td>
            <td>4td>
        tr>
    table>
body>
html>

你可能感兴趣的:(javaweb,css,web)