Hướng dẫn dynamic css in php - css động trong php

Hiện tại, tôi đang làm việc trên khung Codeignitor PHP. Tôi có một số thuộc tính giả sử như màu sắc, phông chữ, vv được lưu trong cơ sở dữ liệu của tôi cho một trong các trường. Tất cả những gì tôi muốn làm là, tôi có một số lớp trong tệp CSS với các giá trị mặc định. Như người yêu cũ. Tôi có một lớp CSS như dưới đây:

     .text_box{
           color: pink;
           text-decoration: none;
           background-color: transparent !important;
           transition: all 0.2s ease-in-out 0s;
       }
       .text_box:hover{
             color: blue;
             text-decoration: none;
             background-color: transparent !important;
             transition: all 0.2s ease-in-out 0s;
        }

Trong cơ sở dữ liệu của tôi, tôi đã đặt thuộc tính màu là màu vàng cho hộp văn bản. Tôi muốn thay đổi nó một cách linh hoạt. Có nghĩa là khi tôi thay đổi màu đó từ trường đầu vào, nó sẽ tự động chuyển đổi thành màu tôi muốn trong thuộc tính CSS.

Tôi không biết chính xác liệu câu hỏi của tôi có đúng hay không. Tôi đã bảo vệ nhiều liên kết nhưng không nhận được giải pháp liên quan đến kịch bản của tôi.

Sử dụng PHP làm thế nào có thể tạo ra các thay đổi động như vậy.

Cảm ơn bạn.

Trong: Bài viết

Được xuất bản vào ngày 28 tháng 4 năm 2005

Giới thiệu

Một câu hỏi thường gặp về danh sách gửi thư và lưu trữ của CSS-discuss.org phổ biến là, Làm cách nào để lưu trữ và tái sử dụng các giá trị theo phong cách của tôi?

Tôi chắc chắn có thể liên quan đến điều này với tư cách là một lập trình viên, đó là một trong những điều đầu tiên tôi nghĩ đến khi tôi bắt đầu sử dụng CSS. Bởi vì tôi thích tách công việc của mình thành các mô -đun riêng biệt, tôi ngay lập tức nhận ra sức mạnh đằng sau khái niệm này. Tôi đã sử dụng PHP, Perl và các công cụ khác để tạo HTML một cách linh hoạt, vì vậy CSS didn có vẻ khá mạnh. Tuy nhiên, tôi không mất nhiều thời gian để học cách tiếp cận các tờ theo cách tương tự.

CSS được thiết kế để bố trí và trình bày. Mục tiêu của nó là khôi phục các tài liệu HTML về mục đích ban đầu của họ để có cấu trúc ở dạng và phản ánh luồng của nội dung có trong chúng. Trong thế giới mới dũng cảm của XHTML, điều này là bắt buộc.

Bạn muốn gây ấn tượng với những người bạn đam mê của bạn? Đề cập đến việc CSS không phải là gần với Turing hoàn thành. Nó thực sự CSS CSS không có khái niệm về các biến, điều kiện, vòng lặp hoặc nhiều tính năng khác vốn có trong các ngôn ngữ lập trình. Bí quyết là tự động tạo các bảng kiểu bằng ngôn ngữ có các thuộc tính này. Đến bây giờ, ngay cả những người không lập trình viên cũng đã nghe nói về PHP.

Sự thâm nhập của PHP vào thị phần kịch bản phía máy chủ web là đáng chú ý và nó đã vượt qua Microsoft Microsoft ASP ba năm trước với tư cách là ngôn ngữ hàng đầu được sử dụng bởi các nhà phát triển. Nó thường chạy trên máy chủ Apache HTTP, máy chủ phổ biến nhất trên web.

Một lý do cho sự tăng trưởng bùng nổ này là PHP là nguồn miễn phí và mở. Nó cũng là một ngôn ngữ tương đối dễ dàng để học và tiêu chuẩn thực tế cho các nhà phát triển tạo các trang web động. Nhưng nó cũng hoàn toàn phù hợp để triển khai CSS và nhiều công nghệ web khác.

Để chứng minh kỹ thuật này, tôi sẽ thiết kế một bố cục trang web cơ bản bằng CSS. Nó sẽ bao gồm một khu vực Masthead, Menu và Nội dung. Sau đó, tôi sẽ chỉ định ba cách sử dụng PhP bằng cách sử dụng Php cho nền và màu nền trước của từng phần tử trong bố cục và cho bạn thấy cách bạn có thể dễ dàng chuyển đổi giữa từng phần hoặc thêm các sơ đồ mới từ một tập lệnh. Tôi sẽ kết luận bài viết bằng cách đề xuất các cách bạn có thể mở rộng hoặc cải thiện những ý tưởng này cho trang web của riêng bạn.

CSS động

PHP là một công nghệ nhúng, có nghĩa là bạn có thể kết hợp mã logic/lập trình với đánh dấu HTML hoặc XHTML bình thường. Theo một nghĩa chung hơn, đầu ra có thể là bất kỳ văn bản nào bạn thích trong trường hợp này, nó CSS. Để chuyển đổi giữa hai chế độ này, bạn chỉ cần sử dụng thẻ bắt đầu và kết thúc đặc biệt:

/ * Mã PHP *//

?> Trang web của tôi





/* … */
?>



Bạn cũng có thể gửi mã trở lại trình duyệt bằng các hàm đầu ra như print() hoặc echo(). Có một số phương pháp khác, nhưng tôi sẽ sử dụng một biến thể trên hàm print() được gọi là cú pháp HEREDOC Syntax để trả về trước bảng kiểu liên tục sau đó mỗi lần thay thế.

Trước khi làm bất cứ điều gì, chúng tôi phải nói với trình duyệt loại tài nguyên nào chúng tôi trả lại. Thông thường, PHP và máy chủ web mà nó chạy theo sẽ tự động nói với trình duyệt rằng tập lệnh PHP là HTML. Trong trường hợp tệp CSS tĩnh, máy chủ biết nó CSS ​​bằng tiện ích mở rộng tệp. Nhưng đây là một trường hợp đặc biệt, vì vậy công việc đầu tiên của chúng tôi là gửi đúng phương tiện hoặc loại MIME đến trình duyệt bằng hàm PHP header():

header('Content-type: text/css');

Bước tiếp theo là xác định các bộ bảng màu bằng các mảng kết hợp. Một mảng kết hợp chỉ là một tập hợp các mục liên quan, mỗi mục được truy cập bởi một chuỗi. Mảng thông thường sử dụng một chỉ mục dựa trên số nguyên. Nó chỉ là một loại biến khác và tất cả các biến được đặt trước bằng dấu hiệu đô la. Vì vậy, cách đầu tiên của các bảng màu của chúng tôi, phong cách mặc định hoặc liên tục, được định nghĩa như thế này:

$persistent = array(
'bgmast' => 'bbd9ee', /* masthead */
'fgmast' => '4d4d4d',
'bgmenu' => 'e7e4d3', /* menu */
'fgmenu' => '444',
'bgcont' => 'fff', /* content */
'fgcont' => '444' );

Lưu ý rằng tôi đã sử dụng các giá trị màu thập lục phân ở đây và không bao gồm dấu pound (#) trong các giá trị màu. Chúng tôi sẽ chăm sóc điều đó khi chúng tôi xuất mã CSS. Để tham khảo một màu trong mảng, bạn giải quyết mảng $persistent bằng chỉ mục được đặt tên hoặc chuỗi. Chẳng hạn, giá trị cho màu nền Masthead có thể được truy cập như thế này:

print $persistent['bgmast']; /* output: bbd9ee */

Lưu ý: Bạn sẽ thấy một biến thể nhỏ trên cú pháp này khi chúng ta thực sự sử dụng nó trong bảng kiểu động. Điều này là do xung đột giữa trình phân tích cú pháp PHP và mã CSS xung quanh nó.: You will see a slight variation on this syntax when we actually use it in the dynamic style sheet. This is due to a conflict between the PHP parser and the CSS code that surrounds it.

Nếu bạn xem mã nguồn PHP trong bảng kiểu động, bạn sẽ thấy rằng giống như trong ví dụ trên, tôi đã xác định hai bảng màu thay thế. Bây giờ, nó chỉ là vấn đề tìm kiếm một cơ chế để chọn mỗi ba phiên bản.

Http get và chuỗi truy vấn

Bạn đã thấy các URI trông hài hước có chứa một dấu hỏi theo sau là các cặp 0 được phân tách bởi các ký tự ampersand ( 1) ở cuối. Khi bạn nhấp vào một liên kết (phần tử neo hoặc 2) trong một trang web, bạn sẽ sử dụng phương thức 3 ( 4 được sử dụng để gửi biểu mẫu). Các bit bổ sung trên những uris có chúng là một cách chuyển các biến cho tập lệnh và toàn bộ điều được gọi là chuỗi truy vấn. PHP cho phép bạn truy cập các tên này và các giá trị của chúng từ một mảng kết hợp toàn cầu được gọi là 5.

Đây chính xác là cách chúng ta có thể yêu cầu các biến thể từ tập lệnh biểu định kiểu. Để làm điều này, chúng tôi gọi nó là ba lần từ các thẻ 6 trong phần tử 7 của tài liệu HTML. Cái đầu tiên là cho bảng kiểu mặc định hoặc liên tục, vì vậy nó không yêu cầu chuỗi truy vấn. Hai yêu cầu tiếp theo cho cùng một tập lệnh sẽ trả về các biến thể dưới dạng các bảng màu thay thế của chúng tôi.

Tất cả ba phần tử 6 bắt đầu với cùng một thuộc tính:

9

Theo sau là bảng phong cách dai dẳng:

print()0

có thuộc tính print()1 (mối quan hệ) của kiểu dáng của kiểu dáng và không có thuộc tính tiêu đề hoặc biến chuỗi truy vấn, và sau đó là hai thay thế:

print()2

trong đó có một print()1 của các kiểu dáng thay thế và có các tiêu đề và chuỗi truy vấn.

Hãy để lại trở lại với kịch bản. Chúng tôi biết nếu trình duyệt gọi print()4 và không có giá trị nào cho print()5 thì đây là bảng kiểu liên tục, vì vậy chúng tôi trả về các quy tắc trực quan cơ bản cho các yếu tố print()6 xác định giả định theo bảng màu mặc định. Mặt khác, chúng tôi chọn từ một trong hai thay thế và chỉ trả về các giá trị màu. Đây là nơi mà phần xếp tầng trên mạng xuất hiện. Vì mọi thứ khác đã được khai báo, tất cả những gì chúng ta phải làm là trả lại các bộ màu thay thế. Khi cả ba được tải xuống và lưu trữ bởi trình duyệt khi tài liệu HTML được yêu cầu lần đầu tiên, khi bạn chọn một sơ đồ khác, hiệu ứng là tức thời.

Để làm cho điều này rõ ràng hơn, hãy xem các tài nguyên này:

1. Mã nguồn của tập lệnh PHP/CSS
2. Kết quả là CSS cho phong cách dai dẳng
3. Kết quả cho bảng màu thay thế #1
4. Kết quả cho bảng màu thay thế #2

Cuộc biểu tình

Bây giờ, hãy để một cái nhìn về kịch bản trong hành động. Đầu tiên, việc giả sử dụng cách sử dụng phong cách dai dẳng:

CauTHEAD

Tiêu đề nội dung

Yếu tố đoạn ở đây, chỉ để điền vào khu vực phần nào.

Bây giờ để thực hiện chuyển đổi. Có hai cách tiếp cận. Nếu trình duyệt của bạn hỗ trợ nó, bạn có thể sử dụng giao diện mà nó cung cấp. Có thể có một tùy chọn trong menu View View, một cái gì đó như kiểu trang, kiểu hoặc kiểu sử dụng và theo tùy chọn đó, bạn sẽ thấy các kiểu thay thế được liệt kê bởi các tiêu đề chúng tôi đã cho chúng trong các yếu tố 6 như được mô tả trước đó. Hãy thử một lần.

Nếu không, chúng ta có thể sử dụng JavaScript. Tôi sẽ cung cấp một cuộc biểu tình và mã nguồn, nhưng tôi đã giành được một lời giải thích về cách thức hoạt động của nó. Đối với điều đó, bạn có thể có một cái nhìn làm việc với các bảng phong cách thay thế từ một danh sách khác nhau.

1. Phối màu thay thế #1 (W3C CSS)
2. Phối màu thay thế #2 (Lựa chọn của tác giả)
3. Đặt lại phong cách liên tục (tạp chí web kỹ thuật số)
4. Mã nguồn cho bộ chuyển đổi sơ đồ JavaScript

Cải tiến

Bởi vì không có trình duyệt nào mà tôi nhận thức được sẽ nhớ rằng bạn thích một kiểu thay thế, và cũng vì giao thức HTTP là do thiết kế không trạng thái, kỹ thuật này có một nhược điểm lớn, hiệu ứng là tạm thời. Để xem ý tôi là gì, chọn một kiểu thay thế, sau đó làm mới trang hoặc chuyển sang một kiểu khác và sau đó quay lại.

Có nhiều cách xung quanh vấn đề này và nhiều khả năng vượt ra ngoài bộ chuyển đổi màu đơn giản này, ví dụ, một trang web thành viên nơi người dùng có thể chọn từ bất kỳ số lượng màu, phông chữ và bố cục. Vì bạn đã xác định người dùng khi họ đăng nhập, việc trả lại các bảng kiểu ưa thích sẽ là một snap. Hoặc có lẽ bạn muốn cung cấp một giao diện cho người dùng bị nhìn thấy có độ tương phản tốt hơn, phông chữ lớn hơn, v.v. Đối với một trang web công cộng, nó có thể lưu sở thích này dưới dạng cookie trên máy người dùng cho lần tiếp theo họ truy cập.

JavaScript là một công cụ tốt để có sự xử lý của bạn, nhưng nó không đáng tin cậy. Như tôi muốn nói, bạn có thể tắt các tập lệnh phía máy chủ. PHP rất tốt trong việc tiết kiệm và đọc cookie, rút ​​các lựa chọn ra khỏi cơ sở dữ liệu và nhiều điều thú vị khác.

• Thêm vào Magnolia
• Thêm vào Yahoo của tôi!
• Thêm vào Newsvine
• Digg câu chuyện này
• Thêm vào del.icio.us

Các chủ đề liên quan: PHP, CSS, lập trình, kịch bản: PHP, CSS, Programming, Scripting

Douglas Clifton đã quyết định nó về thời gian để ngừng ẩn nấp và bắt đầu đóng góp một cái gì đó cho cộng đồng web.Khi anh ấy không làm việc tự do, bạn có thể thấy anh ấy thực hiện các thí nghiệm trên trang web cá nhân của anh ấy LoadaverAgeZero.