Có rất nhiều Đặt lại CSS khác nhau mà chúng tôi có thể sử dụng cho các trang web của mình. Bạn thậm chí có thể tạo của riêng bạn. Một trong hai cách đặt lại chúng tôi sẽ sử dụng trong lớp này là Đặt lại của Eric Meyer, được tạo bởi chuyên gia CSS Eric Meyer
Đây là mã trong Cài đặt lại của Meyer
Bao gồm cả Reset Stylesheet
Chúng tôi có thể bao gồm biểu định kiểu đặt lại bằng một số phương pháp khác nhau
Biểu định kiểu bên ngoài
Chúng ta có thể sử dụng biểu định kiểu đặt lại làm biểu định kiểu bên ngoài giống như chúng ta làm với các kiểu bình thường của mình. Chỉ cần đảm bảo thêm nó trước, vì thứ tự quan trọng
HTML Page for Testing CSS
Hãy nhớ rằng biểu định kiểu Đặt lại CSS phải luôn đi đầu tiên
Sao chép và dán vào biểu định kiểu riêng của chúng tôi
Bạn cũng có thể chỉ cần sao chép tất cả các quy tắc từ biểu định kiểu đặt lại và dán chúng vào biểu định kiểu của riêng bạn. Đảm bảo rằng bạn đặt chúng ở trên cùng để chúng không ghi đè lên bất kỳ quy tắc nào của bạn
Nếu bạn sử dụng phương pháp này, hãy nhớ đánh dấu rõ ràng phần đặt lại của biểu định kiểu và cung cấp tín dụng cho tác giả bằng các nhận xét CSS. Mặc dù tác giả đã cung cấp biểu định kiểu này cho mọi người sử dụng, nhưng đây không phải là tác phẩm của bạn, vì vậy đừng giả vờ như vậy
Bạn cần có gói ember-cli-node-assets
để có thể nhập tệp CSS vào ứng dụng của mình. Sau đó, bạn cần thêm tệp đặt lại vào tệp xây dựng ember-cli
$ npm install --save-dev ember-cli-node-assets
// ember-cli-build.js module.exports = function[defaults] { const app = new EmberApp[defaults, { nodeAssets: { 'simple-css-reset': { import: ['reset.css'] } } }]; };
gói web
Giả sử bạn đã cài đặt và định cấu hình trình tải CSS đúng cách, bạn chỉ cần yêu cầu tệp reset.css
trong điểm nhập của ứng dụng
$ npm install --save-dev css-loader
// index.js import 'simple-css-reset/reset.css';
Gatsby
Vì simple-css-reset
có nghĩa là được sử dụng biểu định kiểu thiết lập lại toàn cầu, nên cách tốt nhất để sử dụng nó trong Gatsby là bao gồm trong
$ npm install --save-dev ember-cli-node-assets0
// gatsby-browser.js import 'simple-css-reset';
Giấy phép
simple-css-reset
là © 2014-2019 Mirego và có thể được phân phối tự do theo giấy phép BSD mới. Xem tệp
$ npm install --save-dev ember-cli-node-assets2
Logo thiết lập lại dựa trên biểu tượng đáng yêu này của Hali Gali Harun, từ The Noun Project. Được sử dụng theo Creative Commons BY 3. 0 giấy phép
Giới thiệu về Mirego
Mirego là một nhóm gồm những người đam mê tin rằng công việc là nơi bạn có thể đổi mới và vui chơi. Chúng tôi là một nhóm gồm những người tài năng, những người tưởng tượng và xây dựng các ứng dụng Web và di động đẹp mắt. Chúng ta đến với nhau để chia sẻ ý tưởng và thay đổi thế giới
Mỗi khi tôi tạo một thứ gì đó 'appy', tôi phải tắt hoặc đặt lại một loạt các kiểu tác nhân người dùng để tôi có thể sử dụng đúng thành phần cho công việc hiện tại nhưng tạo kiểu cho nó nội tuyến với dự án tôi đang xây dựng
Đặt lại ứng dụng dành riêng cho các ứng dụng web
Ghi chú trợ năng
Các phần tử HTML mục tiêu đặt lại này thường nhận các giá trị mặc định về kiểu dáng bởi Tác nhân người dùng mà tôi luôn cần phải 'hoàn tác'
Xin lưu ý rằng một số thiết lập lại này có tác động tiêu cực đến khả năng sử dụng và khả năng truy cập mặc định của trang web. Do đó, hãy đảm bảo bạn thêm lại kiểu có thể truy cập tương đương phù hợp với thẩm mỹ dự án của bạn
Bạn sẽ muốn chạy cái này thông qua Autoprefixer
Thông thường, bạn sẽ cần chạy cái này thông qua Autoprefixer [https. //github. com/postcss/autoprefixer] để sản xuất
Lấy nó qua NPM
Nếu bạn muốn cài đặt qua NPM, bạn có thể chạy npm install app-reset
và nó sẽ có sẵn trong thư mục node_modules của bạn. Thông tin NPM tại đây. https. //www. npmjs. com/gói/đặt lại ứng dụng
Gợi ý? . //twitter. com/benfrain hoặc https. // benfrain. com
Quá nhiều nhà thiết kế CSS mới làm quen không nhận ra tầm quan trọng của việc tạo "thiết lập lại. tập tin css". Khi bạn có một môi trường trong đó mỗi trình duyệt có kiểu dáng "mặc định" riêng, bạn sẽ thường thấy mình đập hộp sọ khi tự hỏi: "Tại sao lại có khoảng cách ở đây?" . Vấn đề với việc sử dụng một trong nhiều khung hiện có là chúng không được thiết kế riêng cho bạn. Ví dụ: tôi không bao giờ sử dụng phần tử "trung tâm" không dùng nữa trong các dự án của mình. Do đó, tôi không cần đặt nó vào kiểu dáng mặc định của mình. Tuy nhiên, những người khác có thể cần phải làm như vậy - mặc dù họ đáng bị tát vào cổ tay. hoặc mông nếu bạn quá nghiêng
Bước 1. Zero Out Margins và Padding của bạn
Theo mặc định, các trình duyệt sẽ thêm lề cho nhiều phần tử. Ví dụ: thường có khoảng sáu pixel lề trên phần tử nội dung. Là nhà thiết kế, bạn nên là người chỉ định những số liệu này. [Có thể ngoại trừ khi nói đến kích thước phông chữ - đó là một chủ đề hoàn toàn khác sẽ được tranh luận dài dòng. ] Vì vậy, hãy loại bỏ một loạt các yếu tố này
1
2
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,
3
ol, li, dl, dt, dd, form, a, fieldset, input, th, td
4
{
5
margin: 0; padding: 0; border: 0; outline: none;
6
20
Bước 2. Kiểm soát các yếu tố của bạn
Bạn có thể nhận thấy rằng các phần tử của bạn có kích thước khác nhau tùy theo trình duyệt. Bạn có thể thay đổi điều này bằng cách đặt cỡ chữ mặc định thành 100%
1
2
23_______11__________
{
4
27
5
20
Tiếp theo, chúng ta sẽ cần xác định lề và phần đệm cho các phần tử tiêu đề của mình. Tôi cũng sẽ xóa list-style-type khỏi các phần tử danh sách của mình. Cuối cùng, tôi sẽ đặt cỡ chữ cơ sở cho phần tử nội dung
1
2
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,2
3
{
4
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,6
5
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,8
6
20
31
32
23
34
{
36
27
38
39
ol, li, dl, dt, dd, form, a, fieldset, input, th, td0
ol, li, dl, dt, dd, form, a, fieldset, input, th, td1
ol, li, dl, dt, dd, form, a, fieldset, input, th, td2
20
ol, li, dl, dt, dd, form, a, fieldset, input, th, td4
ol, li, dl, dt, dd, form, a, fieldset, input, th, td5
ol, li, dl, dt, dd, form, a, fieldset, input, th, td6
ol, li, dl, dt, dd, form, a, fieldset, input, th, td7
{
ol, li, dl, dt, dd, form, a, fieldset, input, th, td9
40
41
20
43
44
45
46
{
48
49
{
020
Bước 3. Mở rộng
Tôi thường muốn đưa vào một số lớp phổ biến mà tôi sử dụng trong tất cả các dự án của mình. Bạn có thể hoặc không thể chọn sử dụng chúng cho mình
1
2
{
43___
{
4
{
8_______15_______15_______069_______0_______11_______1
32
55
34
{
36
59
38_______16_______1_______12_______0_______0_______0
Đây là thiết lập lại đơn giản cuối cùng của chúng tôi. tệp css
1
2
margin: 0; padding: 0; border: 0; outline: none;6
3
margin: 0; padding: 0; border: 0; outline: none;8
4
{
5
margin: 0; padding: 0; border: 0; outline: none;
6
20
31
32
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,2
34
{
36
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,6
38
203
ol, li, dl, dt, dd, form, a, fieldset, input, th, td0
20
ol, li, dl, dt, dd, form, a, fieldset, input, th, td2
ol, li, dl, dt, dd, form, a, fieldset, input, th, td4
23
ol, li, dl, dt, dd, form, a, fieldset, input, th, td5
{
ol, li, dl, dt, dd, form, a, fieldset, input, th, td7
27
ol, li, dl, dt, dd, form, a, fieldset, input, th, td9
39
41
ol, li, dl, dt, dd, form, a, fieldset, input, th, td1
43
20
44
46
ol, li, dl, dt, dd, form, a, fieldset, input, th, td6
48
{
{
040
226
20
228
229
230
231
{
233
234
235
236
237
20
239________9____
Ít nhất đối với tôi, đây là tất cả những gì tôi cần để bắt đầu với một trang web mới. Đối với các dự án của riêng bạn, bạn nên mở rộng dựa trên những gì tôi có ở đây để nó phù hợp nhất với bạn. Có lẽ bạn nên chỉ định lề trên nhiều thành phần thường được sử dụng của mình hơn, chẳng hạn như thẻ đoạn văn
Nếu bạn muốn có một tệp đặt lại 100%, tôi khuyên bạn nên tham khảo tệp "Đặt lại CSS" nổi tiếng của Eric Meyer. Ngoài ra, bạn có thể xem YUI Reset CSS. Hẹn gặp lại bạn vào ngày thứ hai