CSS样式

css是专门用来“美化”标签。

  • 基础CSS,写简单页面&看懂&学会改。
  • 模块,调整和修改。

1.快速了解

<img src="..." style="height:100px" />
<div style="color:red;">中国联通div>

2.CSS应用方式

  • 1.在标签上
<img src="..." style="height:100px"/>
<div style="color:red;">中国联通div>
  • 2.在head标签中写style标签
DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <style>
  	.c1{
  		color:red;
  	}
  style>
head>
<body>
  <h1 class='c1'>查看更多h1>
  <h1 class='c1'>查看更多h1>
  <h1 class='c1'>查看更多h1>
body>
html>
  • 3.写到文件中(上面是css文件,下面是html文件,将css文件导入到html文件中)
  	.c1{
  		color:red;
  	}
  	.c2{
  	height:100px;
  	}
DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
 	 
	<link rel="stylesheet" href="common.css" />
head>
<body>
  <h1 class='c1'>查看更多h1>
  <h1 class='c2'>查看更多h1>
  <h1 class='c1'>查看更多h1>
body>
html>

3.选择器

用的多:类选择器、标签选择器、后代选择器
用得少:属性选择器、ID选择器

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
      /*类选择器,和class关联(常用)*/
      .c1{
        color:red;
      }
      /*id选择器,和id关联*/
      #c2{
        color:gold;
      }
      /*标签选择器,和标签关联*/
      li{
        color:pink;
      }
      /*属性选择器*/
      input[type='text']{
        border:1px solid red;
      }
      /*后代选择器*/
      .yy li{
        color:pink;
      }
    style>
head>
<body>
  <div class="c1">中国div>
  <div id="c2">广西div>
  <ul>
    <li>beijingli>
    <li>shanghaili>
    <li>shenzhenli>
  ul>

  <input type="text">
  <input type="password">

  <div class="yy">
    <ul>美国ul>
    <ul>中国ul>
    <ul>日本ul>
  div>
body>
html>

多个样式存在覆盖问题(如果不想被覆盖 后面加一个 !import)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
      /*如果有重复的,下面的样式会把上面覆盖掉*/
      .c1{
        color:red;
        border:1px solid red;
      }
      .c2{
        font-size:28px;
        color:green;
      }
    style>
head>
<body>
  <div class="c1 c2">中国联通div>
body>
html>

参考内容:
最新Python的web开发全家桶(django+前端+数据库)

你可能感兴趣的:(Web,css,前端)