2019年8月6日暑假训练

最新推荐文章于 2021-11-15 22:11:02 发布

笔描相思

最新推荐文章于 2021-11-15 22:11:02 发布

阅读量154

点赞数

本文链接：https://blog.csdn.net/qq_44788119/article/details/98725085

版权

css入门知识
1，基本语法
选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；…}
2,css的注释
/* 开始以,*/结束
3，选择器
（1）标记选择器：p{font-size:20px;font-family:宋体；}
（2）类选择器：

<html>
     <head>     
  <title>类选择器</title>
     <style type="text/css">
    .ww{font-size:20px;font-family:宋体；color:red;}
    </style>
     </head>
<body>
    <p class="ww">我爱学习</p>
</body>
</html>

（3）特定类的标签：

<html>
     <head>     
  <title>类选择器</title>
     <style type="text/css">
    p.ww{font-size:20px;font-family:宋体；color:red;}
    </style>
     </head>
<body>
    <p class="ww">我爱学习</p>
</body>
</html>

（4）id选择器

<html>
     <head>     
  <title>类选择器</title>
     <style type="text/css">
   #ww{font-size:20px;font-family:宋体；color:red;}
    </style>
     </head>
<body>
    <p id="ww">我爱学习</p>
</body>
</html>

id属性取值必须唯一，只能用于指定的一个标签。
（5）伪类标签
标签：伪类名{css}
常用伪类

link	a标签未被访问前的样式
hover	a标签在鼠标悬停时的样式
active	a标签被用户激活的样式
visited	a标签在访问后的样式

4,css选择器声明
（1）集体声明

h1,h2,h3,h4,h5,p{
font-size:20px;
font-family:宋体；
color:red;
}

（2）全局声明

*{
font-size:20px;
font-family:宋体；
color:red;
}

（3）表示li中的strong标签

li strong{
font-size:20px;
font-family:宋体；
color:red;
}

5，css的定义和引用
（1）内联样式表
语法：<标签 style =“属性1：属性值1；属性2：属性值2；…”>

<html>
     <head>     
  <title>类选择器</title>
     </head>
<body>
    <p style="font-size:20px;font-family:宋体；color:red;">我爱学习</p>
</body>
</html>

（2）内部样式

<html>
        <head>
         <title>内部样式</title>
       <style type="text/css" >
      .int_css{
        border-width:2;
       border-style:solid;
       text-aligin:center;
      color:red;
         }
</style>
</head>
<body>
   <h1 class="int_css" >h1这个标题使用了内部样式。</h1>
   <h1> h1这个标题没有使用样式。</h1>
</body>
</html>

放在head中的。
（3）外部样式
语法：< link herf=“out.css” rel=“stylesheet” type=“text/css”>

.int_css{
        border-width:2;
       border-style:solid;
       text-aligin:center;
      color:red;
         }
外部文件

<html>
        <head>
         <title>外部样式</title>
       <link href="out.css" rel="stylesheet" type="text/css">
</head>
<body>
   <h1 class="int_css" >h1这个标题使用了外部样式。</h1>
   <h1> h1这个标题没有使用样式。</h1>
</body>
</html>

（4）导入外部样式

<html>
        <head>
         <title>样式</title>
       <style type="text/css" >
    @import url("out.css");
         }
</style>
</head>
<body>
   <h1 class="int_css" >h1这个标题使用了样式。</h1>
   <h1> h1这个标题没有使用样式。</h1>
</body>
</html>

（5）外部样式的好处，可以被多个网页共用，便于修改，提高显示速度。
（6）优先级：行内样式——id样式——class样式——标记样式
6，div标签于span标记

<html>
        <head>
       <style type="text/css" >
   .inline_div{
      display:inline;
        }
      #div1{
        background-color:green;
       width:300px;
      height:100px;
        }
       #div3{
        background-color:green;
       color:black;
       font-size:200%;
         }
</style>
</head>
<body>
   <div id="div1">这是divl</div>
 <div class="inline_div">这是div2</div>
 <div id="div3"   >这是div3</div>
</body>
</html>

是固定的一块级元素，意味着他的内容自动的开始新的一行
span标记是行内标记
语法：< span id=“样式名称” class=" 样式名称"> …< /span>
7,css的单位
em,ex,px,%
8,字体样式的属性
在这里插入font图片描述
基本语法：
可以同时对文字设置多个属性
font：font-size font-family font-style
9，css精美排版
在这里插入图片描述
10，css背景与颜色
Color 颜色
Background 背景
Background-color 背景颜色
Background-image 背景图像
Background-repeat 背景图像重复
Background-attachment 背景附件
Background-position 背景图像的位置
background复合属性：
Background ：Background-color /Background-image/ Background-repeat/ Background-attachment/ Background-position
11,css列表样式
在这里插入图片描述上面上是List-style属性的子属性；
ul{List-style:url(List_marker,gif) outside square;}
12,css盒模型
边界：margin
边框：border-style
border-width
border-color
边框的复合属性：
border:border-width/border-color/border-style
填充属性：padding
padding-top
padding-right
padding-bottom
padding-left