我的CSS学习笔记

CSS介绍

CSS是什么?CSS,即“Cascading Style Sheet(层叠样式表)”,是用来控制网页的外观的一门技术。

HTML、CSS和JavaScript是前端技术中最核心的三个元素。HTML控制网页的结构,CSS控制网页的外观,而JavaScript控制网页的行为。我们已经在HTML入门教程中的前端技术简介这一节详细讲解了这三者的区别,大家可以回去查看一下。

HTML、CSS和JavaScript的关系如下:

“HTML是网页的结构,CSS是网页的外观,而JavaScript是页面的行为。”

官方中文文档

CSS内容

CSS引入的三种方式

在HTML中引入CSS共有3种方式:

1.外部样式; 2.内部样式; 3.内联样式;

外部样式
外部样式表在单独文件中定义,并且在标签对中使用link标签来引用。 举例:


<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title>title>
   
<link href="index.css" rel="stylesheet" type="text/css" />
head>
<body>   
    <div>div>
body>
html>

说明:外部样式表都是在head标签内使用link标签来引用的。

内部样式
内部样式,指的就是把CSS代码和HTML代码放在同一个文件中,其中CSS代码放在标签对是放在标签对内的。 举例:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
  <title>title>    
      
  <style type="text/css">
          p{
          color:Red;
          }  
          a,h1,p{
          color:Red;
          }    
   style>
 head>
 <body>   
  <p>学习网p>  
  <p>学习网p>
 body>

内联(行内)样式

内联样式表,也是把CSS代码和HTML代码放在同一个文件中,但是跟内部样式表不同,CSS样式不是在标签对中定义,而是在标签的style属性中定义。

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>title>
head>
<body>
    <p style="color:Red;font-size:50px;background:green;">学习网p>
    <p style="color:Red; ">学习网p>
    <p style="color:Red; ">学习网p>
body>
html>

CSS选择器

/* 通配选择器 */
* {
  color: red;
  margin: 0;
  padding: 0;
}
body{
  margin: 0;
  padding: 0;
}

基本内容

color:前景色

.box1{
	color: red;
	text-decoration: underline;
	border-width: 10px;
	border-style: solid;
	}

视图展示
font-size:文字的大小

background-color:背景颜色

width/height:宽度和高度

一切皆盒子

CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性:

  • padding:即内边距,围绕着内容(比如段落)的空间。
  • border:即边框,紧接着内边距的线。
  • margin:即外边距,围绕元素外部的空间。
    我的CSS学习笔记_第1张图片
    这里还使用了:
  • width :元素的宽度
  • background-color :元素内容和内边距底下的颜色
  • color :元素内容(通常是文本)的颜色
  • text-shadow :为元素内的文本设置阴影
  • display :设置元素的显示模式(暂略)

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