css学习第一天

为什分要使用CSS?

  • 为了美化网页
  • 标签的属性不能满足所有样式的需求
  • 标签的属性使页面结构变得臃肿
  • 为了实现结构与样式的相分离​

什么是CSS?

css:(Cascading Style Sheets) 层叠样式表、级联样式表

如何使用CSS?

行内样式表(内联样式表)

  • 格式 <开始标签 style="CSS的属性名A:CSS的属性值A;CSS的属性名B:CSS的属性值B;">
<h2 style="color: blue">我是头部标签二h2>
  • 特点
    • 只能作用于单个的标签
    • 没有实现结构与样式的相分离

内部样式表

  • 格式:
	<style>
	//(写在里面)
   	 选择器{
    CSS的属性名A:CSS的属性值A;
    CSS的属性名B:CSS的属性值B;
    style>
  • 特点:
    只能作用域选择器相同的标签
    部分实现了结构与样式的相分离

外部样式

  • 格式
<head>
    <link rel="stylesheet" href="./css/style.css" />
head>
  • 属性:rel:链接文件的类型 href:地址

  • 特点
    作用于整个的站点
    完全实现了结构与样式的相分离

css的属性(9种)

字体

  • 字体大小
    • 普通的标签默认字体大小16px(像素)
    • font-size
    • 一般用偶数,像素不低于12px
  • 字体家族
    • 默认字体家族是宋体
    • font-family
    • 属性值可以是汉字、英文、Unicode编码
  • 字重属性
    • 默认字重是 (400=normal)
    • font-weight
    • 属性值可以是整百、英文。 bold=bolder=700
  • 字体倾斜
    • 默认normal
    • font-style
    • 属性值italic、oblique
  • 字体统一设置
    • font:倾斜 加粗 大小 家族
    • 注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
aside {
        font: italic bolder 40px '黑体';
      }

选择器

  • 选择器:通过特定的符号选择指定的元素
  • CSS2选择器分类:
    • 基础选择器:通配符选择器( { } )、标签选择器、类名选择器(.class)、多类名选择器、ID选择器(#id )
    • 复合选择器:
    • 伪类选择器:
  • 类名的命名规范:
    • 见名知意
    • 一般是英文、或者是英文+数字、或者是英文数字

外观属性

  • 文本颜色 :(color
    英文、rgb(0-255)、十六进制 (0~9 a~f) #rrggbb
<style>
      h1 {
        /* color: red; */
        /* color: rgb(255, 255, 0); */
        color: #000000;
      }
style>
  • 首行缩进 :(text-indent) 单位:em
<style>
      .pro-1 {
        text-indent: 2em;
      }
style>
  • 文字间距 :(letter-spacing)
<style>
      aside {
        letter-spacing:10px;
    
      }
    style>
  • 文本描述(text-decoration)
    • 下划线 :underline
    • 上划线 :overline
    • 删除线:line-through
<style>
      #link {
        font-size: 40px;
        color: #ff3456;
        /* text-decoration: underline; */
        /* text-decoration: overline; */
        text-decoration: line-through;
      }
style>
  • 文本水平位置 (text-align)
    • 文本内容相对于标签的水平位置
      • 居左:left
      • 居中:center
      • 居右:right
<style>
      aside {
        font-size: 40px;
        text-align: right;
        /* 宽高属性  width/height */
        width: 800px;
        height: 150px;
        line-height: 200px;
      }
style>
  • 文本垂直位置(line-height)
    • 文本内容相对于标签的高度垂直位置
    • 属性值小于高度值靠上,等于高度值居中,大于高度值靠下
<style>
      aside {
        line-height: 200px;
      }
style>

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