CSS是什么
CSS 是层叠样式表 (Cascading Style Sheets) 的简称,CSS 描述了 如何在屏幕、纸张或其他媒体上显示 HTML 元素.
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
基本语法
选择器 {一条或者N条声明}
选择器: 指定修改的是谁
声明:决定修改什么
例如:
<!-- CSS 要写到 style 标签中 --> <style> h1 { /* 设置字体颜色 */ color: green; } </style> <h1> 要想生活过得去 </h1>
CSS的引入方式
内部样式表
写在 style 标签中. 嵌入到 html 内部,理论上来说 style 放到 html 的哪里都行,但是一般都是放到 head 标签中的.
上面举的例子就是使用这种内部样式表引入方式.
行内样式表
通过 style 属性, 来指定某个标签的样式,当然也就只生效于这个标签.
<h1 style="color: royalblue;"> 要想生活过得去 </h1>
这种写法优先级较高,会覆盖其他引入方式的写法
例如:
<style> h1 { color: green; } </style> <h1 style="color: royalblue;"> 要想生活过得去 </h1>
外部样式表
- 创建一个CSS文件,在文件里写入需要修改的样式.
- 在HTML中通过link标签来进行CSS文件的引入
<link rel="stylesheet" href="[文件路径名]">
选择器
选择器是用来选中页面中指定的标签元素来进行属性的设置
基础选择器
标签选择器
语法: 标签名 { }
<style> div { color: brown; font-size: 100px; } span { color: chartreuse; font-size: 90px; } </style> <div>加油</div> <div>加油</div> <span>努力</span> <span>努力</span>
优缺点:
能快速为同一类型的标签都选择出来.
但是不能差异化选择.
类选择器
语法: .类名 { }
<style> .one { color: green; } .two { color: brown; } .span { color: gold; } </style> <div class="one">今天星期六</div> <div class="two">今天星期六</div> <span class="three">今天星期六</span>
优缺点:
- 差异化表示不同的标签
- 可以让多个html标签被同一个css修改属性.
id选择器
语法: #id { }
<style> #1 { color: red; } </style> <div id="1">id选择器</div>
注意:
- CSS 中使用 # 开头表示 id 选择器
- id 是唯一的, 不能被多个标签使用
通配符选择器
语法: * { }
<style> * { color: green; } </style> <div>通配符</div> <span>通配符</span>
复合选择器
后代选择器
语法: 元素1 元素2 { }
元素之间使用空格分开
元素二是元素一的后代,可以是子元素,也可以是孙元素等等.
可以是任意基础选择器之间的组合
<style> ul .li { /* 标签选择器与类选择器 */ color: green; } ul li { /* 标签选择器与标签选择器 */ color: red; } </style> <ul><li>fascinated</li> <li class="li">入迷的</li> </ul>
子选择器
语法: 元素1>元素2 { }
与后代选择器一样,但元素2只能是元素1的子标签
<style> div>p { color: green; } </style> <div> <p> 子类选择器</p> <span><p>孙类选择器</p></span> </div>
常用元素属性
字体属性
- 设置字体
<style> .font-family .one { font-family: '微软黑'; } .font-family .two { font-family: '宋体'; } </style> <div class="font-family"><div class="one"> 早睡早起! </div> <div class="two"> 身体更好! </div></div>
字体名称可以用中文, 但是不建议
如果字体名有空格, 使用引号包裹
如果所使用字体找不到就会使用默认字体
- 字体大小
<style> .font-size { font-size: 40px; font-family: '宋体'; } </style> <div><p class="font-size">字体大小</p></div>
注意不要忘记字体大小单位px
- 字体粗细
<style> div { font-weight: bold; /* bold=700 */ } </style> <div>字体粗细</div> <span style="font-weight: 100;">字体粗细</span>
使用数字表示粗细
取值范围是 100 -> 900
- 文字样式
<style> div .one { /* 设置斜体 */ font-style: italic; } div .two { /* 取消斜体 */ font-style: normal; } </style> <div><p class="one">斜体</p> <p class="two">取消斜体</p> </div>
文本属性
- 文本颜色
在计算机中我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果,针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).
数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色
设置文本颜色我们有三种设置方式分别为:
- 预定义的颜色值(比如直接写出颜色所对应的单纯)
- 十六进制形式 (#f0f0f0 )
- rgb(255, 255, 255)
- 文本对齐
用属性 text-align 来进行控制
- 文本缩进
用属性 text-indent 来进行控制
text-indent: 值px ;
单位可以使用 px 或者 em(em为当前文字的大小) - 文本装饰
使用属性text-decoration 来进行修饰
- text-decoration : underline -下划线
- text-decoration : none -什么都没有,通常用来给链接标签进行去下划线处理
背景属性
- 背景颜色
使用background-color属性
background-color: 指定颜色
<style> .one { background-color: green; } .two { background-color:#f0f; } .three { background-color: rgb(188,188,188); } </style> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div>
- 背景图片
使用background-image属性来进行修改
background-image: url(…);
<style> div { height: 400px; background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.7001bfb15f5a6ae18f5d8ab08aa841e2?rik=BkzF%2bDcWXFxAIg&riu=http%3a%2f%2fpic.qqbizhi.com%2fallimg%2fbpic%2f0%2f4000_2.jpg&ehk=Qx4cZP5pzezjYTRHXs3i8zvCfbSo6%2fKGdSbRIDRx%2b0U%3d&risl=&pid=ImgRaw&r=0); /* url 可以是绝对路径, 也可以是相对路径 */ } </style> <div> 1 </div>
- 背景平铺
背景平铺通过background-repeat属性来进行修改
background-repeat: [平铺方式]
- repeat: 平铺
- no-repeat: 不平铺
- repeat-x: 水平平铺
- repeat-y: 垂直平铺
圆角矩形
通过 border-radius 属性进行修改
border-radius:长度;
- 生成圆形
长度 为矩形的内切圆半径,所以要生成圆形只需要让长度为正方形的一半即可.
<style> .one { background-color: chartreuse; width: 100px; height: 100px; border-radius: 50px; } </style> <div class="one"> </div>
- 生成圆角矩形
生成圆角矩形也很简单,将 border-radius 的属性值设为矩形高度的一半即可
<style> .one { background-color: chartreuse; width: 200px; height: 100px; border-radius: 50px; } </style> <div class="one"> </div>
元素的显示模式
块级元素
常见的块级元素都有:h1 - h6 , p ,div , ul ,ol ,li 等
<style> .one .one1 { font-weight: bold; } .one .one2 { font-weight: 200; color: green; } </style> <div class="one"> <div class="one1" > 块级元素 </div> <div class="one2"> 块级元素 </div> </div>
由上述结果可见块级元素是独占一行的(代码中并没有使用换行).
特点:
- 独占一行.
- 高度, 宽度, 内外边距, 行高都可以控制.
- 不设置宽度的话,默认跟父级元素同宽.
行内元素
常见的行内元素: a , b , i , s , u , span
<style> .one { width: 200px; } .two { width: 600px; } </style> <span class="one"> 无语义标签 </span> <span class="two"> 无语义标签 </span>
我们可以发现设置高度, 宽度, 行高无效.
特点:
- 不独占一行,一行可以显示多个.
- 设置高度, 宽度, 行高无效.
- 左右外边距有效,内边距有效.
我们可以使用display属性来修改元素的显示模式
- display: block 改为块级元素
- display: inline 改为行内元素
推荐网站
如果还想了解更多的css知识可进入链接网站继续进行学习.
