Getting started with CSS
1. Introduction to CSS
1. What is css
css: Cascading Style Sheets (full name in English: Cascading Style Sheets) is a computer language used to express file styles such as HTML ( an application of Standard General Markup Language ) or XML (a subset of Standard General Markup Language).
2. The role of CSS
CSS can control the layout, color, background, width, height, and font of the web page, making the web page more beautiful and beautiful according to the UI design layout. To give an example, simply put it: we use HTML to create a house, and we can use css to decorate the house.
2. Basic usage
1. Introduce the method of calling CSS
The methods of calling css are basically divided into: inline type, embedded type, external chain type, import type (import type is not commonly used, just understand)
Let me show you the above methods through a piece of code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 2、内嵌式：便于本页面标签对样式进行重用 -->
<style type="text/css">
h1{
color: pink;
}
</style>
<!-- 3、外链式：便于多个html文件对css进行重用 -->
<link rel="stylesheet" type="text/css" href="test1.css"/>
<!-- 4、导入式：既可以写在内嵌中，也可以放在外链中 -->
<style type="text/css">
@import url("test.css");
</style>
<!--
外链式与导入式区别
1、link是XHTML标签：@import属于CSS范畴，只能加载CSS
2、link引用CSS时，在页面载入时间同时加载；@import需要页面网页完全载入以后加载
3、link是XHML标签，无法兼容：@import在CSS2.1提出的，低版本的浏览器是不支持（IE5以上支持）
4、link支持使用Javascript控制DOM去改变样式；而@import不支持
-->
</head>
<body>
<!-- 1、行内式 -->
<p style="background-color: #0000FF">你是一名软件开发人员</p>
<h1>大家一起来学习</h1>
<div>今天天气很不错</div>
</body>
</html>running result:
3. Basic selector
1. Label selector
Tag selectors use an HTML tag as the name of the selector
2. Class selector
Use a custom name, prefixed with a ., and then call the class selector through the class attribute of the HTML tag
3. ID selector
Use a custom name, as # a prefix, and then match the name through the id attribute of the HTML tag
id selector is unique
Code demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
标签选择器：选出所有同名标签
*/
p{
background-color: wheat;
}
/*
类选择器
*/
.tive{
color: red;
}
.pp{
font-size: 30px;
}
/*
id选择器
*/
#first{
font-weight: 900;
}
</style>
</head>
<body>
<p class="tive pp" id="first">段落1</p>
<p class="tive pp">段落2</p>
<p class="tive">段落3</p>
<div>
<p>段落4</p>
</div>
</body>
</html>running result:
4. Advanced selector
1. Wildcard selector
Wildcard * selector which can select all elements
2. Union selector
Multiple selectors connected by commas, these selectors are: label selector, class selector or id selector, etc.
3. Descendant selector
Descendant selector E F: Select all descendant elements F of the parent element E
Code demonstration:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 通配符选择器：选出所有标签 */
*{
color: pink;
}
/* 并集选择器 */
div,ul{
background-color: green;
}
active,ul{
font-weight: 900;
}
/* 后代选择器E F：选出父元素E的所有后代子孙元素F */
p a{
color: #0000FF;
}
ul a{
color:orange;
}
li a{
color: red;
}
</style>
</head>
<body>
<div class="active">段落1</div>
<div>段落2</div>
<p a href="#">百度<a></p>
<ul>
<a href="#">淘宝</a>
<li>列表</li>
<li><a href="#">新浪</a></li>
</ul>
</body>
</html>
running result:
5. Common properties of CSS
1. Unit and color
Unit: default font size of all browsers is 16px, do not set size em: em=16px
Color: There are three ways to set the color
Color word: yellow yellow blue blue black black red red white white pink powder
rgb（0-255,0-255,0-255）
Hex notation: #FF0000
Code demonstration:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
所有浏览器默认字体大小16px
不设置大小em：em=16px
设置大小：1em=30px
*/
/* 颜色表示方式3种
颜色单词：yellow黄 blue蓝 black黑 red红色 white白 pink粉
rgb（0-255,0-255,0-255）
红 绿 蓝
rgb（255,255,255）白色
rgb（255,0,0）红色 1111 1111 0000 0000 0000 0000
F F 0 0 0 0
十六进制表示法：#FF0000
*/
#first{
width:500px;
background-color:#FD3568;
font-size: 20px;
/* 首行缩进 */
text-indent: 40px;
}
#second{
width: 500px;
background-color: pink;
font-size: 20px;
/* 首行缩进 */
text-indent: 2em;
}
</style>
</head>
<body>
<div id="first">段落1</div>
<div id="second">段落2</div>
</body>
</html>running result:
2. Font style
Font related properties
| Attributes | meaning | Setting instructions |
| font-size | font size | px、%、em |
| font-weight | font weight | 100-900, normal: normal, lighter: thin, bold/bolder: thicker/thicker |
| font-style | font style | normal: normal, oblique: oblique |
| font-family | font type | times new roman, Song typeface, imitation Song, etc. |
Code demonstration:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
/* 字体大小 */
font-size: 40px;
/* 字体粗细：
100-900
normal：正常，默认
lighter：细
bold/bolder：粗/更粗
*/
font-weight: oblique;
/* 字体风格：
normal：正常，默认
italic是使用文字本身的斜体属性
oblique是让没有倾斜属性的文字倾斜
*/
font-style: normal;
/*
字体类型：
如果浏览器不支持第一个，会往下自动使用第二个
中文必须放在英文之后
*/
font-family: "times new roman","arial narrow","仿宋";
/*
font：如果四个属性都设置，简化写法
顺序:风格 粗细 大小 类型
*/
/* font: italic lighter 20px "times new roman","arial narrow","仿宋"; */
}
</style>
</head>
<body>
<p>welcome花果山</p>
</body>
</html>
running result:
3. Text style
properties of the text
| Attributes | meaning | Setting instructions |
| text-align | level setting | left、center、right、 |
| line-height | increase paragraph spacing | The font can be centered when the line height and height are the same |
| text-indent | text indent | em、px、% |
| text-decoration | text decoration | underline: underline, overline: overline, line-through: strikethrough, none: remove underline |
| text-transform | capitalization | lowercase: lowercase, uppercase: uppercase, capitalize: capitalize the first letter |
| letter-spacing | Change the spacing between text or letters | |
| word-spacing | Change the spacing between English words |
Code demonstration:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
width: 500px;
height: 50px;
background-color: pink;
/* 字体颜色 */
color: red;
/* 水平设置：left center right */
text-align: left;
/*
设置字体居中：行高和高度一致
增加段落间距
*/
line-height: 50px;
/* 文本缩进 */
text-indent: 2em;
/* 文本装饰
underline:下划线
overline：上划线
line-through:删除线
none:去掉下划线*/
text-decoration: line-through;
/* 大小写设置
lowercase：小写
uppercase：大写
capitalize：首字母大写
*/
text-transform: capitalize;
/* 改变文字或者字母之间的间距 */
letter-spacing: 10px;
/* 改变英文单词之间的间距 */
word-spacing: 10px;
}
</style>
</head>
<body>
<p>holle孙悟空在花果山</p>
<p>holle猪八戒在高老庄</p>
</body>
</html>
running result:
4、vertical-align
vertical-align: commonly used for inline block elements such as img, td, etc., and often used for aligning images and text in css vertical-baseline: the
baseline of the element is aligned with the baseline of the parent element
vertical-middle: the center line of the element is aligned with the baseline of the parent element
vertical-top: The top line of the element is aligned with the parent element baseline
Code demonstration:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background-color: pink;
}
/* 图片与文本对齐方式 */
img{
/*
vertical-align：常用于img、td等行内块元素
baseline：该元素的基线与父元素基线对齐
middle：该元素的中线与父元素基线对齐
top：该元素的顶线与父元素基线对齐
*/
vertical-align: middle;
}
/* 文本垂直居中 */
p{
height: 100px;
background-color: #00FFFF;
/* 无效：适用于行内块 */
/* vertical-align：middle */
line-height: 100px;
}
</style>
</head>
<body>
<div>
<img src="../imgs/核桃.png" >
<span>段落</span>
<p>段落</p>
</div>
</body>
</html>
running result:
5. Content overflow processing
Usually when we lay out, some text content will exceed the height that overflows our limit, and some pictures will break the DIV , causing the web page to be misplaced and messed up. In this way, we need to solve how to use CSS to automatically hide the content that exceeds the set CSS width and CSS height without breaking the DIV layout .
The overflow property specifies what happens when the content overflows the element's box
overflow-x: horizontal setting
overflow-y: vertical setting
overflow-visible: default
overflow- hidden: hidden.
overflow-scroll: scrolling, scroll bars will be displayed whether the content overflows
overflow- auto: automatic recognition
white-space text does not wrap
white-space:normal: default
white-space:nowrap: the text does not wrap, all spaces will be automatically removed
white-space:pre: no line breaks, spaces will be automatically reserved
text-overflow The way text overflows are displayed
text-overflow:clip：默认
text-overflow:ellipsis：...
Code demonstration:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
/* 盒子太小，内容溢出
overflow-x:水平方向设置
overflow-y:垂直方向设置
visible：默认
hidden：隐藏.
scroll：滚动，内容是否溢出都会显示滚动条
auto：自动识别
*/
overflow: auto;
/* 文本不换行处理
normal：默认
nowrap：文本不换行，会自动去掉所有空格
pre：不换行，会自动保留空格
*/
white-space: nowrap;
/* 文本溢出的显示方式
clip：默认
ellipsis：...
*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
一闪一闪亮晶晶，一闪一闪亮晶晶，一闪一闪亮晶晶，一闪一闪亮晶晶，
一闪一闪亮晶晶，一闪一闪亮晶晶，一闪一闪亮晶晶，一闪一闪亮晶晶，
</div>
</body>
</html>
running result:
I will share CSS here today, and I will continue to share other content of CSS in the future. If you don’t understand something about this blog, please leave a message at the bottom of the comment area or send me a private message. Thank you for watching!