CSS-CSS基础

1- CSS样式组成

1.1 CSS规则构成

  • 选择器
  • 声明

图片说明

CSS-CSS基础_第1张图片

1.2 CSS引用

写在head标签内:

<head>
	<meta charset="UTF-8">
	<title>css样式title>
	<style type="text/css">
		CSS样式…
	style>
head>

1.3 CSS注释

CSS注释:/*注释语句*/

代码示例


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-css初体验title>
  <style type="text/css">
    h3{
      
        text-align: center;
        color: red;
        font-family: "微软雅黑";
    }

    p{
      
        text-align: center;
        color: blue;
        font-size: 20px;
    }
  style>
head>
<body>
  <h3>望江南·超然台上作h3>
  <p>姑且点上新火来烹煮一杯刚采的新茶p>
  <p>作诗醉酒都要趁年华尚在啊p>
  <p>水中的月影虽会因风而破碎p>
  <p>但也终究会随风停而自圆p>
body>
html>

执行结果

CSS-CSS基础_第2张图片

2-CSS属性

2.1 文字属性

属性 格式(红色字体快捷键) 取值
文字样式的属性 fs font-style: italic;
fsn font-style: normal;
normal:正常的,默认就是正常的
italic : 倾斜的
文字粗细的属性 fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;
bold 加粗
bolder 比加粗还要粗
lighter 细线, 默认就是细线
文字大小的属性 fz font-size:;
fz30 font-size: 30px;
通过font-size设置大小一定要带单位, 也就是一定要写px
文字字体的属性 ff font-family:“楷体”; 1.如果取值是中文, 需要用双引号或者单引号括起来。
2.设置的字体必须是用户电脑里面已经安装的字体。

代码示例


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2-css文字属性title>
  <style type="text/css">
    p{
      
        /*font-size: initial;
        font-weight: bold;
        font-size: 20px;
        font-family: "微软雅黑";*/

        /*文字属性缩写*/
        font: bold italic 20px "微软雅黑";
    }
  style>
head>
<body>
  <h1>CSS 实例!h1>
  <p>这是一个段落。p>
body>
html>

执行结果

CSS-CSS基础_第3张图片

2.2 文本属性

属性 格式(红色字体快捷键) 取值
文本装饰的属性 td text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线
文本水平对齐的属性 ta text-align: left;
tar text-align: right;
tac text-align: center;
left 左
right 右
center 中
文本缩进的属性 ti text-indent:;
ti2e text-indent: 2em;
2em, 其中em是单位, 一个em代表缩进一个文字的宽度

代码示例


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3-文本属性title>
  <style type="text/css">
    p{
      
        text-decoration: none;
        text-align: left;
        text-indent: 2em;
    }

    a{
      
        text-decoration: none;
    }
  style>
head>
<body>
  <p>kobe是MVP,kobe是MVP,kobe是MVP,kobe是MVP,kobe是MVP,kobe是MVP,kobe是MVPp>
  <a href="#">我是超链接a>
body>
html>

执行结果

CSS-CSS基础_第4张图片

3- CSS样式

3.1 行内样式(内联样式)

在开始标签内添加style样式属性

<h1 style="color:red;font-size:20px;">css使用方法h1>

3.2 内部样式表(嵌入样式)

内部样式(嵌入样式),把css样式代码写在:

<style type="text/css">
	样式…
style>

说明:<style>要放在<head>标签之间

代码实现:


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css使用方法title>
	<style type="text/css">
        p{
      color:blue;}
        h2{
      color:red;}
	style>
head>
<body>
    
    
    <h1 style="color:red;font-size:20px;">css使用方法h1>

    
    <h2>css使用方法h2>
    <p>行内样式p>
    <p>嵌入样式p>
    <p>外部样式p>
    <p>导入样式p>
	
body>
html>

3.3 外部样式表(Link链入)

  • 外部样式表,把CSS样式代码写在独立的一个文件中
  • 扩展名: CSS文件名.CSS
  • 引入外部文件:
  • 说明:link要放在head标签之间

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css使用方法title>
	<link href="css.css" rel="stylesheet" type="text/css"/>
head>
<body>
    
    <h1 style="color:red;font-size:20px;">css使用方法h1>

    <h2>css使用方法h2>
    <p>行内样式p>
    <p>嵌入样式p>
    <p>外部样式p>
    <p>导入样式p>
body>
html>

外部文件

p{
     color:blue; font-size: 30px;}
h2{
     color:red;}

3.4 导入式

  • @import “外部CSS样式”

    说明:@import写在style标签内最开始


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css使用方法title>
	<style type="text/css">
        
	   @import url(css.css);
	style>
head>
<body>
    
    <h1 style="color:red;font-size:20px;">css使用方法h1>

    <h2>css使用方法h2>
    <p>行内样式p>
    <p>嵌入样式p>
    <p>外部样式p>
    <p>导入样式p>
	
body>
html>

外部文件

p{
     color:blue; font-size: 30px;}
h2{
     color:red;}

3.5 方法区别

类别 引入方法 位置 加载
行内样式 开始标签内style html文件内 同时加载
内部样式 head中style内 html文件内 同时加载
外部样式 head中link内 CSS样式文件与html文件分离 页面加载时,同时加载CSS样式
导入式(@import) 在样式代码最开始处 CSS样式文件与html文件分离 在读取完html文件之后加载

3.6 使用外部样式的好处

  • CSS与Html分离
  • 多个文件可以使用同一个样式文件
  • 多文件引用同一个css文件,CSS只是需要下载一次。

你可能感兴趣的:(#,CSS)