CSS入门笔记

本文详细介绍了CSS的基本概念,包括注释、样式类型、选择器、文本样式设置、元素分类及盒模型等内容,帮助初学者快速掌握CSS的核心知识。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.CSS注释代码

/*注释语句*/


2.CSS样式分3种:内联式、嵌入式、外部式 

a.内联式 css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:

<p style="color:red">这里文字是红色。</p>
注意: 要写在元素的开始标签里, 并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开

<p style="color:red;font-size:12px">这里文字是红色。</p>

b.嵌入式 嵌入式css样式,就是可以把css样式代码写在<style type="text/css"></style>标签之间

<style type="text/css">
span{
color:red;
}
</style>
一般情况下,嵌入式css样式写在<head></head>之间。

c.外部式 也称为外联式,就是把css代码写在一个单独的外部文件中,以".css"为扩展名,在<head>内使用<link>标签将css样式文件链接到HTML文件内

<link href="base.css" rel="stylesheet" type="text/css" />

注意:

css样式文件名称以有意义的英文字母命名,如main.css

rel="stylesheet" type="text/css"是固定写法不可修改

<link>标签位置一般写在<head>标签之内

调用的css相对路径是否正确:

1、"/xxx.xx" 表示从网站根目录开始,即网站根目录下的xxx.xx文件

2、"./xxx.xx"表示本目录下的xxx.xx

3、"../xxx.xx"表示上一级目录中的xxx.xx,当然,"../../xxx.xx"表上上一级目录中的xxx.xx

4、"xxx/"表示当前目录下的xxx文件夹,也相当与"./xxx/"

优先级:就近原则

内联式 > 嵌入式 > 外部式

3.选择器

每一条css样式声明(定义)由两部分组成,形式如下:

选择器{
    样式;
}
4. 标签选择器其实就是html代码中的标签

p{font-size:12px;line-height:1.6em;}
5.类选择器

.类选器名称{css样式代码;}
注意:

a、英文圆点开头

b
、其中类选器名称可以任意起名(但不要起中文)

.stress{color:red;}/*类前面要加入一个英文圆点*/

<span class="stress">胆小如鼠</span>
6.ID选择器

a、为标签设置id="ID名称",而不是class="类名称"。

b、ID选择符的前面是井号(#)号,而不是英文圆点(.)。

#setGreen{
   color:green;
}
<span id="setGreen">公开课</span>
7.ID选择器和类选择器的区别

a、ID选择器只能在文档中使用一次

b、可以使用类选择器词列表方法为一个元素同时设置多个样式。

下面代码是正确的:

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>
下面代码是错误的:

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时,我们班上了一节公开课...</p>
8.子选择器,即大于符号(>),用于选择指定标签元素的 第一代子元素。

.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li加入红色实线边框。

9.包含(后代)选择器,即加入空格,用于选择指定标签元素下的后辈元素。

子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

举例地址:点击打开链接

10.通用选择器,使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:

* {color:red;}
11.伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色

a:hover{color:red;}
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红

12.分组选择符,想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:

h1,span{color:red;}
13.权值,为同一个元素设置不同的css样式代码,根据权值决定启用哪一个。

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。

14.设置最高权值

p{color:red!important;}


排版

1.字体

body{font-family:"Microsoft Yahei";}

2.字号、颜色

body{font-size:12px;color:#666}
3.粗体 

p span{font-weight:bold;}
描述
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。
4.斜体

p a{font-style:italic;}
描述
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
5.下划线

p a{text-decoration:underline;}
这个属性允许对文本设置某种效果,如加下划线。如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。

描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。(浏览器不支持)
inherit 规定应该从父元素继承 text-decoration 属性的值。
6.缩进

p{text-indent:2em;}

注意:2em的意思就是文字的2倍大小。

7.行间距

p{line-height:1.5em;}
8.字间距

汉字、字母间隔:

h1{
    letter-spacing:50px;
}


单词间隔:

h1{
    word-spacing:50px;
}
9.块状元素中的文本、图片设置对齐方式

h1{
    text-align:center;
}
描述
left 把文本排列到左边。默认值:由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。

10.元素分类:块状元素、内联元素、内联块状元素

常用的块状元素有:

<div> <p> <h1> ...<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>

常用的内联元素有:

<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>

常用的内联块状元素:

<img> <input>

11.块状元素特点:

a.每个块状元素都从新的一行开始,并且其后的元素也另起一行。

b.元素的高度、宽度、行高及顶和底边距都可设置

c.元素宽度在不设置的情况下,是它本身父容器的100%

设置display:block就是将元素显示为块状元素

a{display:block;}
块状元素可以通过代码设置称为内联元素

display:inline

12.内联元素特点:

a.和其他元素都在一行上

b.元素的高度、宽度、及顶部和底边距不可设置

c.元素的宽度就是它包含的文字或者图片的宽度,不可改变


13.内联块状元素的特点:

a.和其他元素都在一行上

b.元素的高度、宽度、行高以及顶部和底边距都可以设置

display:inline-block

盒子模型

内边距:padding

外边距:margin

边框:border

都有4个方向

1.边框:可以设置 粗细、样式、颜色 三个属性

div{
    border:2px  solid  red;
}
or

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}
a.border-style常见样式有:dashed虚线、dotted点线、solid实线

b.border-color颜色可以设置为16进制颜色

border-color:#888;//前面的井号不要忘掉。
c.border-width宽度也可以设置为thin、medium、thick,最常用的还是像素px

d.单独设置某一边框

div{border-bottom:1px solid red;}
border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;
2.盒模型的宽度和高度

css内定义的宽和高指的是填充以里的内容范围

元素实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

元素的高度同理

3.盒模型-填充

元素内容与边框之间设置的距离称之为“填充”。填充也分为上、右、下、左(顺时针

div{padding:20px 10px 15px 30px;}
如果上右下左的填充都为10px

div{padding:10px;}
如果上下一样,左右一样

div{padding:10px 20px;}

CSS布局模型

1.流动模型

流动(flow)是默认的网页布局模式,网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。流动布局模型有2个比较典型的特征:

a.块状元素都会在所处的包含元素内自上而下安顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。

b.流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。

2.浮动模型

如果想让两个块状元素并排显示,设置元素浮动,如div、p、table、img等元素都可以被定义为浮动

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>
3.层模型

层模型就像是PS中的图层编辑,没个图层嫩巩固精确定位操作,适合在网页局部使用。层模型有三种形式:

a.绝对定位(position:absolute)

b.相对定位(position:relative)

c.固定定位(position:fixed)

——绝对定位,需要设置position:absolute,这条语句将元素从文档流中拖出来,然后用left、right、top、bottom属性相对于其最近的一个具有定位属性的父包含块进行绝对定位,如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。如下面的带啊名实现div元素相对于浏览器窗口向右移动100px,向下移动50px

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>
效果如下


——相对定位:position:relative相对于以前的位置移动。相对定位完成的过程是首先按照static(float)方式生成一个元素,然后相对于以前的位置移动,偏移前的位置保持不动。

理解起来就是   之前的位置跟普通网页一样,照常使用

——固定定位:position:fixed; 与absolute定位类型相似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。除非在屏幕中移动浏览器窗口的屏幕位置,或者改变浏览器窗口的显示大小,否则固定定位的元素始终会位于浏览器窗口视图内的某个位置,不会受文档流动的影响,拖动滚动条时位置固定不变。

个人感觉,就比如QQ最上面的导航栏


——relative与absolute组合使用:相对于其他元素进行定位  position:absolute

注意:

a.参照定位的元素必须是相对定位元素的前辈元素

b.参照定位的元素必须加入position:relative;

c.定位元素加入position:absolute  便可以使用top、bottom、left、right来进行偏移定位了

单位和值

1.颜色值

a.英文命令颜色

p{color:red;}
b.RGB颜色

p{color:rgb(133,45,200);}
or

p{color:rgb(20%,33%,25%);}
c.十六进制颜色 这种颜色设置方法是现在比较普遍使用的方法

p{color:#00ffff;}

2.长度值

a.像素:指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于像素作为单位。

b.em:就是本元素给定字体的font-size值,如果元素的font-size为14px,那么1em=14px。

c.百分比


水平居中总结

1.不定宽块状元素

a.加入table标签

第一步:加入table标签

第二步:为这个table左右margin居中

html代码:

<div>
<table>
  <tbody>
    <tr><td>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
    </td></tr>
  </tbody>
</table>
</div>

css代码:

<style>
table{
    margin:0 auto;
}

ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
</style>

b.设置display:inline方法,然后用text-align:center实现居中

html代码:

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码:

<style>
.container{
    text-align:center;
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
.container li{
    margin-right:8px;
    display:inline;
}
</style>

c.设置position:relative 和 left:50%

给父元素设置float,然后给父元素设置position:relative和left:50% 子元素设置position:relative和left:-50% 来实现居中

代码如下:

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码:

<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
垂直居中总结

1.父元素高度确定的单行文本:通过设置父元素的height和line-height高度一致来实现

<div class="container">
    hi,imooc!
</div>

css代码:

<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>
2.父元素高度确定的多行文本

a.使用插入table标签,同时设置vertical-align:middle  说白了就是把文本内容放到表格里,再设置表格居中

css中用于数值居中的属性vertical-align,但这个样式只有在父元素为td或者th时,才会生效。所以需要插入table标签。

html代码:

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

css代码:

table td{height:500px;background:#ccc}
b.在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式 同上

ml代码:

<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>

css代码:

<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
c.隐形改变display类型。

当元素设置以下2个句之一:

  1. position : absolute
  2. float : left 或 float:right

元素会自动变为以display:inline-block的方式显示

inline-block 的元素既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align 属性。
HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,空白符自然占据一定的宽度,使用inline-block 会产生了元素间的空隙。










评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值