CSS
Three Ways to Insert CSS
CSS Selectors: element, id, class
CSS box model
CSS box properties
Flexbox
CSS preprocessing
media queries
Three Ways to Insert CSS
优先级：The order of priority, from highest to lowest, is inline, internal, external
the !important declaration can be added to a rule to give it the highest priority
regardless of its origin. However, it's generally recommended to use !important
sparingly, as it can make debugging and maintaining styles more difficult.
Inline CSS
Inline CSS refers to adding CSS styles directly within the HTML elements
using the style attribute. It allows you to apply specific styles to individual
elements without the need for an external CSS file.
<p style="color: red; font-size: 18px;">This is a red para
Internal CSS
Internal CSS, allows you to define CSS styles within the <style> tags in the
<head> section of an HTML document. It provides a way to include CSS
rules directly in the HTML file without the need for an external CSS file.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-size: 24px;
CSS 1
}
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<h1>This is a blue heading</h1>
<p>This is a red paragraph</p>
</body>
</html>
External CSS
With an external style sheet, you can change the look of an entire website
by changing just one file!
Each HTML page must include a reference to the external style sheet file
inside the <link> element, inside the head section
CSS Selectors: element, id, class
In CSS, you can use selectors to target and apply styles to specific HTML
elements. There are several types of selectors, including element selectors, ID
selectors, and class selectors.
1. Element Selector:
The most basic selector targets HTML elements directly. For example, to
target all
<p> elements and apply a specific style:
p {
color: blue;
}
2. ID Selector:
An ID selector targets a specific element with a unique ID attribute. IDs
CSS 2
should be unique within a page. To select an element by its ID, use a hash
# followed by the ID name. For example:
#header {
background-color: gray;
}
In HTML:
<div id="header">This is the header</div>
3. Class Selector:
A class selector targets elements that share a specific class attribute.
Classes can be applied to multiple elements, allowing you to apply the
same styles to different elements. To select elements by class, use a dot
. followed by the class name. For example:
.highlight {
font-weight: bold;
}
In HTML:
<p class="highlight">This text is highlighted.</p>
<p>This text is not highlighted.</p>
Here's a summary of how to use these selectors:
Element Selector: Targets all elements of a specific type.
elementname {
/* styles */
}
ID Selector: Targets a specific element by its unique ID.
CSS 3
#elementID {
/* styles */
}
Class Selector: Targets elements that share a specific class.
.classname {
/* styles */
}
You can also combine selectors for more specific targeting. For example, you
could use a combination of an element selector and a class selector to target
only specific elements with a certain class:
[Link] {
color: green;
}
In this example, only <p> elements with the class highlight will be targeted.
CSS box model
The CSS box model is essentially a box that wraps/ræps/ around every HTML
element. It consists of: margins/ˈmɑːrdʒɪn/, borders, padding, and the actual
content. The image below illustrates the box model:
CSS 4
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin/ˈmɑːrdʒɪn/ - Clears an area outside the border. The margin is
transparent
In the CSS box model, the most inside component is the content area. It is the
area that contains the actual content of an HTML element, such as text,
images, or videos. The content area is surrounded by padding, which is the
space between the content and the border of the element. The border, in turn,
is the next layer outside of the padding and it surrounds both the content and
padding. Finally, the margin is the space between the border of the element
and the adjacent elements. So, the content area is the innermost component of
the CSS box model and it determines the size and position of the other
components.
CSS box properties
1. 字体与文本样式：
: 控制字体系列。
font-family
: 设置字体大小。
font-size
: 设置字体粗细。
font-weight
: 设置字体样式（斜体等）。
font-style
: 控制文本颜色。
color
: 对齐文本（left、center、right）。
text-align
: 文本装饰（underline、overline、line-through等）。
text-decoration
: 行高，控制文本行与行之间的距离。
line-height
2. 盒子模型与布局：
和
width : 控制元素的宽度和高度。
height
: 元素外边距。
margin
: 元素内边距。
padding
: 元素边框。
border
CSS 5
display 元素显示方式（block、inline、flex等）。
:
: 元素定位方式（static、relative、absolute、fixed等）。
position
: 浮动元素。
float
3. 背景与边框样式：
: 背景颜色。
background-color
: 背景图片。
background-image
: 背景图片尺寸调整。
background-size
: 元素圆角。
border-radius
: 边框颜色。
border-color
: 边框宽度。
border-width
4. 列表与链接样式：
: 列表项样式（bullets、numbers等）。
list-style
: 自定义列表项标记图片。
list-style-image
: 列表项标记类型。
list-style-type
a: 链接样式（颜色、装饰等）。
5. 动画与过渡效果：
: 元素过渡效果。
transition
: 定义动画效果。
animation
: 动画关键帧。
@keyframes
6. 响应式设计：
: 媒体查询，用于响应式设计。
media queries
flexbox和 : 灵活的布局系统。
grid
7. 其他常见属性：
: 元素不透明度。
opacity
: 元素阴影效果。
box-shadow
: 文本大小写转换（uppercase、lowercase等）。
text-transform
CSS 6
鼠标指针样式。
cursor :
以上只是一些常见的 CSS 属性示例。在实际开发中，根据需求和设计，你可能会使
用更多的属性来实现各种效果。不同属性的组合可以创建出丰富多彩的网页设计。
Flexbox
[Link]
Flexbox is a layout model in CSS (Cascading Style Sheets) designed to
efficiently arrange and distribute elements within a container. It allows
developers to easily control element alignment, direction, order, and size,
making it ideal for building responsive web designs that adapt to different
screen sizes and devices. With Flexbox, there is less reliance on floats,
positioning, or table-based layouts, providing a more flexible and responsive
approach to creating modern web layouts. It has become an essential tool in
contemporary web development, working seamlessly with other powerful
layout systems like CSS Grid to create sophisticated and adaptive designs.
The Flexible Box Layout Module, makes it easier to design flexible
responsive layout structure without using float or positioning.
.container { display: flex; /* or inline-flex */ }
.container { flex-direction: row | row-reverse | column | column-
reverse; }
.container { justify-content: flex-start | flex-end | center | space- between |
space-around | space-evenly | start | end | left | right ... + safe | unsafe; }
CSS preprocessing
CSS preprocessing refers to the use of scripting languages or tools that extend
the capabilities of vanilla CSS. These scripting languages introduce variables,
functions, and other syntactical goodies that aren't available in standard CSS.
Once written, this "preprocessed" code is then compiled down into standard
CSS, which browsers can understand.
There are several CSS preprocessors available, but the most popular ones
include:
1. Sass (and SCSS)
CSS 7
Developed in Ruby, though there are now implementations in many
languages.
Uses .sass or .scss file extensions.
Allows variables, nesting, mixins, and more.
Example:
$font-stack: Helvetica, sans-serif;
body {
font: 100% $font-stack;
color: $primary-color;
}
2. Less
Developed in JavaScript and runs both on the client-side and server-
side.
Uses .less file extension.
Has a feature set similar to Sass, including variables, nesting, and
mixins.
Example:
@base-color: #f938ab;
body {
color: saturate(@base-color, 5%);
}
3. Stylus
Developed in JavaScript.
Offers a very flexible syntax; you can even omit braces and colons.
Allows for variables, functions, mixins, and more.
Example:
CSS 8
base-color = #f938ab
body
color: base-color
Why use a CSS Preprocessor?
1. Variables: Store font stacks, colors, etc. in variables to easily maintain and
change them across the stylesheet.
2. Nesting: Write more concise and clear CSS, making it easier to read and
maintain.
3. Functions & Mixins: Reuse entire styles, attributes, or operations in
multiple places.
4. Extend/Inheritance: Share a set of CSS properties from one selector to
another.
5. Operators: Perform arithmetic operations to calculate values.
6. Conditional Logic and Loops: For advanced tasks and themes.
7. Built-in Functions: For color manipulation, string operations, etc.
8. Importing: Split your CSS into multiple files but still compile down to one
file.
9. Enhanced community tools and frameworks: Many tools and frameworks
have been built around these preprocessors, enhancing the workflow of
developers.
To use a preprocessor, you'll typically need to set up a development
environment and build process that compiles the preprocessor syntax down to
standard CSS. This might involve tools like Webpack, Gulp, Grunt, or just a
command-line compiler specific to the preprocessor you're using.
media queries
Standard breakpoints for media queries
CSS 9
In responsive web design, there are standard breakpoints for media queries
that help designers and developers ensure their content is presented well
across different devices. The following are some common breakpoints, but
it's worth noting that these values can vary based on specific project
needs:
1. Mobile Phones (less than 768px):
@media (max-width: 767px) {
/* Styles for mobile phones */
}
2. Tablets (768px to 1023px):
@media (min-width: 768px) and (max-width: 1023px) {
/* Styles for tablets */
}
3. Desktop (1024px and above):
@media (min-width: 1024px) {
/* Styles for desktop */
}
These are just general breakpoints. With the variety of device sizes and
screen resolutions, other specific breakpoints might also be necessary.
Moreover, a best practice is to adopt a "Mobile First" approach, meaning
you design for small screen devices first and then use media queries to
add styles for larger screens.
However, it's essential not to rely solely on these common breakpoints. The
best approach is to resize your browser and observe at which sizes your
content starts to break or no longer fits, and then set breakpoints based on
actual content and design needs.
Media queries are a feature in CSS used to apply styles based on certain
conditions, primarily to adapt and respond to different device characteristics.
CSS 10
This is a fundamental tool in responsive web design.
With media queries, you can apply specific styles when the browser window or
device meets certain conditions. The most common use is to change styles
based on the width and height of the viewport, but they can also be based on
device characteristics like resolution, orientation (landscape vs. portrait), and
more.
Here's a basic example of how media queries are used:
/* Base styles that apply universally */
body {
font-size: 16px;
}
/* Styles that apply when the browser window is 600px or le
ss in width */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
/* Styles that apply when the browser window is in portrait
mode */
@media (orientation: portrait) {
body {
background-color: lightblue;
}
}
In the above example:
1. By default, the body font size is set to 16px.
2. If the browser window is 600px wide or less, the font size decreases to
14px.
CSS 11
3. If the browser is in portrait orientation, the background color will be light
blue.
There are numerous media features you can test for:
width and height: Width and height of the viewport.
device-width and device-height: Width and height of the rendering
surface of the output device.
orientation: Whether the device is in landscape (width greater than height)
or portrait (height greater than width) mode.
resolution: Resolution of the output device, in dots per inch (dpi) or dots
per pixel (dppx).
aspect-ratio: Width-to-height aspect ratio of the viewport.
...and many more.
Media queries have been essential in making websites and web apps adapt to
different devices, especially with the proliferation of mobile devices with
various screen sizes and resolutions.
CSS 12